CSS设计导航栏

ul{
     display:block; margin:0px; padding:0px; list-style:none; 
     background:url(/images/skin/nav_bg_out1.gif) repeat-x left top;
}

ul li{
    display:block; float:left; margin:0px;  padding-top:4px;  padding-bottom:6px; 
     background:url(/images/skin/nav_bg_line1.gif) no-repeat right top;
}

ul li a{
   color:#fff; text-decoration:none; padding-top:4px;  padding-bottom:6px;  padding-left:10px; padding-right:10px;

}

ul li a:hover{
    color:#fff; background:url(/images/skin/nav_bg_over1.gif) repeat left top;
}

 

//注意上面 li  和 a  的样式，li 中的 padding-top,  padding-bottom 必须和a中的保持一致！

// Html代码如下：

 

<ul class="navigate">
     <li><a href="#">Home</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">Trade</a></li>
     <li><a href="#">Online Inquiry</a></li>
</ul>