二级菜单jquery

浏览数：50 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title><Document></title>
 6 </head>
 7 <style type="text/css">
 8 ul,li,body{margin:0;padding: 0;}
 9 #nav{width: 500px;margin: 10px auto;}
10     ul li{list-style: none;}
11     .clear{clear: both;}
12     #nav>li{float: left;position: relative;}
13     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
14     li a:hover{background: #c66;color: #fff;}
15     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
16 </style>
17 <body>
18     <ul id="nav">
19         <li>
20             <a href="#">一级菜单</a>
21             <ul class="subNav">
22                 <li><a href="#">二级菜单</a></li>
23                 <li><a href="#">二级菜单</a></li>
24                 <li><a href="#">二级菜单</a></li>
25                 <li><a href="#">二级菜单</a></li>
26             </ul>
27         </li>
28         <li>
29             <a href="#">一级菜单</a>
30             <ul class="subNav">
31                 <li><a href="#">二级菜单</a></li>
32                 <li><a href="#">二级菜单</a></li>
33                 <li><a href="#">二级菜单</a></li>
34                 <li><a href="#">二级菜单</a></li>
35             </ul>
36         </li>
37         <li><a href="#">一级菜单</a></li>
38         <li><a href="#">一级菜单</a></li>
39         <li><a href="#">一级菜单</a></li>
40         <div class="clear"></div>
41     </ul>
42     <script src="jquery.min.js"></script>
43     <script type="text/javascript">
44      $(‘#nav>li‘).hover(
45          function(){
46              $(this).find("ul").animate({height:"150px"}, 200)
47          },
48          function(){
49              $(this).find("ul").animate({height:0}, 200)
50          }
51          )
52     </script>
53 </body>
54 </html>