一、总结（点击显示或隐藏总结内容）
一句话总结：用的是定位，父标签相对定位，子标签就可以绝对定位了，绝对定位的孩子还是可以设置绝对定位。用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>