网页中导航栏的实现一般用ul li，
细节：一般一个页面中不可能只用一次ul li 所以在实现导航栏的时候，我们会对ul设置#nav（#menu）。
技术点（1）：要对ul中的li设置成一排，所以用display:inline，将li并排布局。
技术点（2）：li里面的a标签 需要设置为块级元素 + 但a标签 父级 li 不设置具体宽度，所以用display:inline-block；这样做是为了让 a 随着 li 并排继承，同时对a 设置宽度和高度等样式生效。
细节部分：ul#nav{ 100%; height:60px; background:#00A2CA;margin:0 auto}
A：这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=”nav”设置样式才能生效。
B:上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。
原地址：http://www.divcss5.com/shili/s731.shtml
例子如下：
css部分
* { margin: 0; padding: 0; font-family: "Microsoft YaHei"; } ul, li { list-style: none; } a { text-decoration: none; } #Top { min-width: 1024px; height: 70px; } #Top .top-wrap { position: relative; max-width: 1300px; height: 100%; margin: 0 auto; border-left: 1px solid blue; border-right: 1px solid blue; } #Foot { position: absolute; top: 70px; left: 0; right: 0; bottom: 0; min-width: 1024px; } #Foot .nav-warp { width: 280px; height: 100%; } #Foot .nav-warp ul#nav-ul { width: 100%; height: 100%; font-size: 0px; } ul#nav-ul>li>a { display: inline-block; width: 200px; line-height: 55px; border-bottom: 2px solid #cccccc; font-size: 16px; color: #ffffff; font-weight: 700; padding-left: 80px; background-color: #00a2ca; } ul#nav-ul>li>a>.arrows{ width: 13px; height: 13px; display: inline-block; float: right; margin-right: 30px; margin-top: 22px; background-image: url("../images/right.png"); background-repeat: no-repeat; background-position: center center; } /*二级菜单样式 开始*/ ul.nav-ul2>li>a { display: inline-block; width: 200px; line-height: 40px; font-weight: inherit; font-size: 14px; color: #ffffff; background-color: #0095bb; border-bottom: 2px solid #C3C3C3; padding-left: 80px; } /*二级菜单样式 结束*/ /*二级菜单隐藏块*/ .li_hidden{ display: none; } .li_block{ display: block; } /*二级菜单隐藏块 结束*/
HTML+JS部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="../css/demo.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="Top"> <div class="top-wrap"></div> </div> <div id="Foot"> <div class="nav-warp"> <ul id="nav-ul"> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> 首页 </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> HTML教程 <span class="arrows"></span> </a> <ul class="nav-ul2 li_hidden"> <li class="com-li2"><a href="###">HTML教程1</a></li> <li class="com-li2"><a href="###">HTML教程2</a></li> <li class="com-li2"><a href="###">HTML教程3</a></li> <li class="com-li2"><a href="###">HTML教程4</a></li> </ul> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> CSS基础 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> HTML CSS开发工具 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> Jquery基础 <span class="arrows"></span> </a> </li> <li class="com-li"> <a href="javascript:;"> <span class="icon"></span><!--这里作用是放图标的，为后期准备，这里暂时不用写--> 帮助中心 <span class="arrows"></span> </a> <ul class="nav-ul2 li_hidden"> <li class="com-li2"><a href="###">HTML教程1</a></li> <li class="com-li2"><a href="###">HTML教程2</a></li> <li class="com-li2"><a href="###">HTML教程3</a></li> <li class="com-li2"><a href="###">HTML教程4</a></li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> $(function () { $(".com-li").click(function () { $this = $(this);//获取当前被点击的元素 //$this.find(".nav-ul2") 找打二级菜单 if ($this.find(".nav-ul2").hasClass("li_block")) {//如果菜单中有li_block这个类，也就是说二级菜单打开状态 $this.find(".arrows").css("background-image","url(../images/right.png)"); $this.find(".nav-ul2").removeClass("li_block"); // $(".com-li2").css("background-Color", "#0095bb").children("a").css("color", "#FFF"); }else{ $this.find(".nav-ul2").addClass("li_block");//展示二级菜单 $this.find(".arrows").css("background-image","url(../images/down.png)");//改变箭头方向 $this.siblings().find(".nav-ul2").removeClass("li_block");//其他同级元素 $this.siblings().find(".arrows").css("background-image", "url(../images/right.png)");//其他同级元素箭头方向 return false; } }) }) </script> </body> </html>
效果图
