Zach Rosenfield

This is a quick one... I wanted to share a "SharePoint 101" tip: Styling the Site Actions Menu.

Here's what i started with--you can tell that the site actions menu (with its Out-Of-The-Box style) wasn't going to work for me:

I wanted something simpler that matches the "welcome" screen! So for starters, i removed the background from the container div:

.ms-siteactionsmenu div div div{
     background:transparent !important;
}

Notice the "!important".  This is so that I can override the inline styles on the control (get ready for a few more of them).  Next I remove the border from this same div:

.ms-siteactionsmenu div div div{
                background:transparent !important;
     border:1px solid transparent !important;
}

So--Getting Better!

Note that I leave the 1 pixel 'transparent' border so that when I show a border on hover I don't get a funky "resize" behavior.  So, on that note--let's add the "hover" behavior:

.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{

     background: green !important;

     border:1px solid white !important;

}

On hover now looks like this:

Simple and clean! To finish it off, I similarly set the Welcome to the same hover style:

.ms-siteactionsmenu div div div.ms-siteactionsmenuhover, .ms-SpLinkButtonActive{

     background: green !important;

     border:1px solid white !important;

}