222222

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

猜你喜欢