<!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>
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>