css实现导航条

导航条作为一个网站必不可少的组件，普遍实现导航条的方式是使用ul和li元素

<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul{ list-style:none; width:100px}
a{color:#333;text-decoration:none}
.nav li a{ 
    display:block; 
    text-indent:20px; 
    height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>
<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

这是一个垂直导航条，要想把垂直导航条编程横向导航条只需要简单的把li元素左浮动，然后再设置一些padding或者margin用以更好的展示文字

圆角菜单只需要给a元素指定一个背景图像即可，一般会设置鼠标悬浮的li元素显示不同样式

为了拥有更好的用户体验，但鼠标经过一个li时，可以设置这个li元素的高度变化(即设置一个更大的height值，但默认会向下延伸，所以还需要对a元素设置margin-top:负值)

还可以让导航项横向延伸，不过就需要借助JavaScript或者JQuery

$(function(){
  $("a").hover(
function(){
$(this).stop().animate({"width":"160px"},200);<!--表示在200毫秒内把a元素的宽度变为160px-->
},<!--鼠标进入事件-->
function(){
$(this).stop().animate({"width":"120px:},200);}<!--鼠标移出事件-->
);
});