1、页面中的菜单项可以通过嵌套的ul和li来表示
2、菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单
3、浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进，Opera浏览器比较特殊，li的标识符和其他浏览器不同
4、list-style属性值为none时（即设置list-style:none），可以清除ul和li前面的小圆点
5、清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值
6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域
7、可以使用background-repeat来控制背景图的重复填充方式
8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的
9、text-decoration属性值为none时，可以取消文字上的下划线
10、background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向。第二个对应纵向
11、background-image的值为none表示没有背景图
12、background-image的值为no-repeat时，背景图不会在所在的区域中重复显示
13、IE6以外的其他浏览器可以通过设定display的值设为block来让a元素充满所在的区域，对于IE6，则需要设定display为inline-block，同时设定a的宽度
14、display的值为none可以用于隐藏元素
15、.main a和 .main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择 .main的子节点中的a节点
16、show，hide方法可以用于显示或隐藏元素，没有参数时的效果和修改CSS的display属性效果一样。参数可以是单位为毫秒的数字，或者是slow，normal，fast这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果靠不断改变元素的宽度和高度来实现的。
17、toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同
18、slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内自发元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同
19、slideToggle和toggle达到的效果类似
20、DOCTYPE对于jQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果
21、float的值是left，可以使原来各自位于一行的元素全部在一行中向左浮动。
22、可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入多个选择器
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <link href="css/style.css" rel="stylesheet" /> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <ul> <li class="menu"> <a href="#">菜单有一</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单一</a></li> </ul> </li> <li class="menu"> <a href="#">菜单有二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单一</a></li> </ul> </li> <li class="menu"> <a href="#">菜单有三</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单一</a></li> </ul> </li> </ul> <ul class="list"> <li class="hmenu"> <a href="#">菜单一</a> <ul> <li> <a href="#">子菜单一</a> <a href="#">子菜单二</a> </li> </ul> </li> <li class="hmenu"> <a href="#">菜单二</a> <ul> <li> <a href="#">子菜单一</a> <a href="#">子菜单二</a> </li> </ul> </li> <li class="hmenu"> <a href="#">菜单三</a> <ul> <li> <a href="#">子菜单一</a> <a href="#">子菜单二</a> </li> </ul> </li> </ul> </body> </html>
css代码：
@charset "utf-8"; ul{padding:0;margin:0;/*清除子菜单中的缩进*/} ul,li{list-style:none;/*清除ul、li上默认的小圆点*/} a{text-decoration: none;} li{background: #eeeeee;/*backgroun-image会覆盖background-color*/}
.list{margin-top:20px;} .menu,.hmenu{background:url(../img/timg18.jpg) repeat-x left center;width:130px;line-height: 30px;} .menu a,.hmenu a{ text-decoration: none;/*取消下划线*/ display:block;/*填充整个区域*/ /*以下两行专门为IE6写*/ display:inline-block; width:105px; color:#fff; padding-top:3px; padding-bottom:3px; padding-left:25px; background: url(../img/down.png) no-repeat 3px center; } .menu li a,.hmenu li a{background:none;color:#666} .menu ul,.hmenu ul{display:none;/*隐藏子菜单项*/} .hmenu{float:left;margin-left:1px;}
jQuery代码：
<script> $(document).ready(function (){//检查页面是否加载完毕 $(".menu>a").click(function (){//找到主菜单项对应的子菜单项；如果换成.menulist a会触发二级菜单中的a的点击事件 var ulNode=$(this).next("ul"); // 多种隐藏方式 // if(ulNode.css("display")=="none"){ // ulNode.css("display","block"); // } // else{ // ulNode.css("display","none"); // }//第一种为css方式；代码比较繁琐，jQuery用最少最简洁的代码实现功能 // show()和hide() // ulNode.show("slow");//括号里的参数可以为数字（单位为毫秒）、slow、fast和normal // ulNode.hide();//参数和show()一样 这个是隐藏 // ulNode.toggle();//参数同上 第三种toggle() // 第四种slideDown()和slideUp() // ulNode.slideDown();//自动加有过渡效果，参数同上 // ulNode.slideUp(); ulNode.slideToggle();//自动判断是展开还是隐藏 第五种slideToggle() changeIcon($(this)); }); // $(".menu>a").mouseover(function (){ // var ulNode=$(this).next("ul"); // if(ulNode.css("display")=="none"){ // ulNode.css("display","block"); // } // else{ // ulNode.css("display","none"); // } // }); //鼠标划入 // $(".menu>a").mouseout(function (){ // var ulNode=$(this).next("ul"); // if(ulNode.css("display")=="block"){ // ulNode.css("display","none"); // } // }); //鼠标划出 $(".hmenu").hover(function (){ $(this).children("ul").slideDown(); changeIcon($(this).children("a")); },function (){ $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); //修改指示图标 function changeIcon(mainNode){ if(mainNode){ if(mainNode.css("background").indexOf("down.png")>=0){ mainNode.css("background","url(img/up.png) no-repeat 3px center"); } else{ mainNode.css("background","url(img/down.png) no-repeat 3px center"); } } } }); </script>