css网站导航-菜单

一个简单的网站导航效果:

效果案例：查看演示

css:

 *{margin:;padding:;border:;}
 body{font-family: arial, 宋体, serif;font-size: 12px;}
 .menu{width:1170px;margin:0 auto;height:24px;}
 #nav{line-height: 24px;list-style-type: none;background: #666;}
 #nav a{display: block;width: 80px;text-align: center;}
 #nav a:link{color: #666;text-decoration: none;}
 #nav a:visited{color: #666;text-decoration: none;}
 #nav a:hover{color: #FFF;text-decoration: none;font-weight: bold;}
 #nav li{float: left;width: 80px;background: #CCC;}
 #nav li.on{background: #999;}
 #nav li a:hover{background: #999;}
 /*清除浮动*/
 .clearfix:after{visibility:hidden;display:block;font-size:;content:" ";clear:both;height:;}
 .clearfix{*zoom:;}

body:

 <div class="menu">
     <ul id="nav" class="clearfix">
         <li>
             <a href="#">产品介绍</a>
         </li>
         <li>
             <a href="#">服务介绍</a>
         </li>
         <li>
             <a href="#">成功案例</a>
         </li>
         <li>
             <a href="#">关于我们</a>
         </li>
         <li>
             <a href="#">在线演示</a>
         </li>
         <li>
             <a href="#">联系我们</a>
         </li>
     </ul>
 </div>

js：

 $("#nav li").click(function () {
     $(this).siblings().removeClass("on")
     $(this).addClass("on");
 }).eq(0).click();