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>