Rollover Horizontal List

With this simple tab menu example, you do not need any type of javascript code to change the background color of list navigation.

Firstly, you have to type your navigation link in unordered list & set id for your <ul> top menu. In CSS I have set ul#topmenu. Secondly, you have to give margin and padding as zero because default margin & padding are not to be used.

XHTML

 <div id="menubar">
  <ul id="topmenu">
   <li><a href="#" 
   class="active">Item one</a></li>
   <li><a href="#">Item two</a></li>
   <li><a href="#">Item three</a></li>
   <li><a href="#">Item four</a></li>
   <li><a href="#">Item                                                                                                                                                                      five</a></li>
  </ul>
 </div>

CSS

#menubar {
text-align:center
}
  #topmenu{
  margin: 0;
  padding-left: 0;
/*white-space: nowrap;*/
}

#topmenu li{
  display: inline;/*Require*/
  list-style-type: none;
  list-style-image:none;
  border:0;
}
#topmenu a {
  padding: 3px 10px;
  text-decoration:none;
  font-size:15px;
  background-color: #036;
  color:#FFFFFF;
  outline:none; /*Remove Dotted Line*/
}
#topmenu a:link, #navlist a:visited{
  color: #fff;
  background-color: #036;
}
/*Mouse over effect*/
#topmenu a:hover{
  color: #fff;
  background-color: #369;
}