Graphicalwonder

Customizing the MOSS 2007 Drop Down Menu

Dec 18

Shane PerranSharePoint 2007 2 Comments

While customizing the Top Drop Down Navigation Bar, you might notice some of the drop down items do not stretch all the way when you hover over them.  You will get a “two tone” effect, not exactly desirable.

Since I’ve run into this several times I figured I would share the CSS I’ve been editing to get around this:

The problem child:
The *width and min-width seem to cause trouble when you have long items. 

.ms-topNavFlyOuts a
{
display:block;
*width:120px;
min-width:120px;
color:#3764a0;
padding:4px 8px 4px 8px;
}

The Fix:
Pretty straight forward, remove or comment out those two properties.  Use width:100%; instead.

.ms-topNavFlyOuts a
{
 display:block;
 width:100%;
 padding:4px 8px 4px 8px;
}
Happy Customizing