Customize SharePoint 2010 global navigation bar using CSS

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;

}

I Hope this help.