css网站导航-菜单

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

 效果案例：查看演示

css:

*{margin: 0;padding: 0;border: 0;}
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:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}

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();