I´d like to lead you back to the basic CSS classes that run
the SharePoint navigation. No need to get it to complicated, the global
navigation can be customized in so many ways regarding the functions as well as
look & feel, and there´s not so many classes involved.
In the SharePoint2010 core css there´s only four classes for
the navigation list, the menu items, hover and selected. This following css
contains a most simplified customization of the global navigation, it will
change the background color, hover color, selected color and make it a bit
higher and more prominent.Include following classes in your css file or in master page.
/* Navigation
list */
.s4-tn
{
background-color: #FFFFF; /*Menu background
colour*/
padding: 0px;
margin: 0px;
font-family: 'Calibri' !important;
font-size: 11pt !important;
padding-left: 10px;
}
/* Global
navigation */
.s4-tn li.static > .menu-item
{
color: #5A9A18;
white-space: nowrap;
border: 1px
solid transparent;
padding: 4px 10px;
line-height: 25px;
height: 28px;
}
/* Hover */
.s4-tn li.static > a:hover
{
background: url("/_layouts/Images/selbg.png") repeat-x left top;
background-color: #529610;
color: #fff;
text-decoration: none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected
{
background: url("/_layouts/Images/selbg.png") repeat-x left top;
background-color: #529610;
color: #fff;
text-decoration: none;
border: 1px
transparent solid;
padding-right: 10px;
padding-left: 10px;
margin: 0px;
border-color: #529610;
}
