I had to create a custom CSS for a SharePoint portal, and ended up struggling a bit with the SharePoint CSS classes. Not being much chop at CSS, the only way I could get the job done was with Firefox’s Web Developer plugin and Heather Solomon’s excellent SharePoint 2007 CSS Resource Chart (http://www.heathersolomon.com/content/sp07cssreference.htm).

In this latest project I had to modify the colours of the top menu bar. Easy enough, but I noticed when I viewed the dropdowns that if the submenu text was too long, it caused discolourations to appear in the flyout menu.



Notice that there is a light blue bar next to the submenu item I was hovering over. Personally I think with the default SharePoint colour scheme this looks quite nice. However, as I was asked to make the row all the same colour, I had to modify the menu flyout classes as follows:

.ms-topNavFlyOuts tr td
{
background-color: #C0C0C0;
}
.ms-topNavFlyOuts a:visited
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOuts a:link
{
background-color: #C0C0C0;
color: white;
}
.ms-topNavFlyOutsHover a:link
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:hover
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover a:visited
{
background-color: #ffeaad;
color: black;
}
.ms-topNavFlyOutsHover tr td
{
background-color: #ffeaad;
}

The final result: