常规导航条写法

body{
  background: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  color: #666666;
  padding: 0px;
  margin: 5px;
  text-align: center;  
  font-size: 12px;
}

#nav{
  width: 400px;
  text-align: center;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  margin:15px auto;
}
#nav ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#nav li{  
  float: left;
  }
#nav li a{
  text-decoration: none;
  color: #666;  
  background: url(images/menubg.gif) no-repeat 0px 0px;
  width: 100px;
  line-height: 20px;
  display: block;
}
#nav li a:hover{
  color: #CC0000;  
  background: url(images/menubg.gif) no-repeat 0px -20px;  
}

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
    </ul>
</div>