Styles in SharePoint 2010

Styling the top navigation using CSS

The styles below have been specified in Randy's blog. Please read the blog before using the styles below.

.s4-tn a.selected {
background-color:#643228;
color:#FFFFFF !important;
}

.s4-tn li.static > a:hover {
background:#643228 !important;
color:#FFFFFF !important;
text-decoration:none !important;
}

.s4-tn li.static > .menu-item {
height:16px !important;
line-height:16px;
color:#643228;
font-size:11px !important;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif !important;
display:inherit;
padding:6px 9px 6px 9px;
text-transform:uppercase;
}
/*Start:The below style is used to keep the top level menu items highlighted when the flyout menu is hovered over (Note that there are certain issues one faces while using this style, use the below style only if it is necessary)*/
.menu :hover > a {
color:#FFFFFF !important;
background-color:#643228;
}
/*End:The below style is used to keep the top level menu items highlighted when the flyout menu is hovered over*/

/* flyout holder */
.s4-tn ul.dynamic {
border:0;
background-color:#643228;
}


/* flyout item */
.s4-tn li.dynamic > .menu-item {
background-color:#643228;
color:#fff;
border-bottom:1px #BD8947 solid;
text-transform:none;
height:18px !important;
line-height:18px !important;
font-size:11px !important;
font-weight:normal;
}


/* flyout item hover */
.s4-tn li.dynamic > a:hover {
background-color:#BD8947;
}