一、總結（點擊顯示或隱藏總結內容）
一句話總結：用的是定位，父標簽相對定位，子標簽就可以絕對定位了，絕對定位的孩子還是可以設置絕對定位。用toggle設置子菜單顯示和隱藏。用的是jquery的hover方法。
1、鼠標滑過的時候最常設置的屬性是什么？
透明度 opacity
2、如何讓一級菜單下的二級菜單顯示而三級菜單不顯示？
.menu>li:hover>ul{display:none} 直接選擇孩子，而不要選擇子輩 而且注意這里是li:hover，也就是被鼠標懸浮的那個li的孩子ul(下級菜單)
3、如何實現被鼠標懸浮的那個li的孩子ul(下級菜單)顯示出來？
.menu>li:hover>ul{display:none} 而且注意這里是li:hover
也可以直接用jquery的hover方法
$('.menu li').hover(function(){
$(this).children('ul').toggle()
})
4、如何滑動二級菜單讓三級菜單顯示出來？
注意這里用到了多個li:hover
.menu>li:hover>ul>li:hover>ul{display: block;}*/
5、元素的顯示和隱藏切換用什么？
toggle
6、三級菜單的本質是什么？
元素的顯示和隱藏 + 元素的定位
二、jquery如何實現三級列表
1、相關知識
三級導航
案例描述：用兩種方法實現一個簡單的三級導航欄。
案例重點：該案例非本身並不復雜，重點在於對思路的理解。
2、代碼
<!DOCTYPE html>
2 <html lang="en">
3 <style>
4 </style>
5 <head>
6 <meta charset="UTF-8">
7 <title>演示文檔</title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
9 <style type="text/css">
10 *{padding: 0;margin:0;}
11 a{color: #fff;text-decoration: none;}
12 .menu{background: orange;height: 30px;line-height: 30px;}
13 .menu li{list-style-type: none;float: left; position: relative;}
14 .menu li a{display: block;height: 30px;float: left;margin-left: 10px}
15 .menu li ul{position: absolute;display: none;}
16 .first{top: 30px}
17 .first li a{width: 100px;background: rgba(100,50,30,0.6)}
18 .first li a:hover{width: 100px;background: rgba(100,50,30,0.8)}
19 .first_2{left: 100px}
20 /* .menu>li:hover>ul{display: block;}
21 .menu>li:hover>ul>li:hover>ul{display: block;}*/
22
23 </style>
24 </head>
25 <body>
26 <ul class="menu">
27 <li><a href="#">菜單一</a>
28 <ul class="first">
29 <li><a href="#">菜單一</a></li>
30 <li><a href="#">菜單二</a></li>
31 <li><a href="#">菜單三</a></li>
32 <li><a href="#">菜單四<span>▶</span></a>
33 <ul class="first_2">
34 <li><a href="#">菜單一</a></li>
35 <li><a href="#">菜單二</a></li>
36 <li><a href="#">菜單三</a></li>
37 <li><a href="#">菜單四</a></li>
38 </ul>
39 </li>
40 </ul>
41 </li>
42 <li><a href="#">菜單二</a></li>
43 <li><a href="#">菜單三</a></li>
44 <li><a href="#">菜單四</a></li>
45 </ul>
46 <script>
47 $('.menu li').hover(function(){
48 $(this).children('ul').toggle()
49 })
50 </script>
51 </body>
52 </html>