二级菜单jquery

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title><Document></title>
 </head>
 <style type="text/css">
 ul,li,body{margin:0;padding: 0;}
 #nav{width: 500px;margin: 10px auto;}
     ul li{list-style: none;}
     .clear{clear: both;}
     #nav>li{float: left;position: relative;}
     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
     li a:hover{background: #c66;color: #fff;}
     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
 </style>
 <body>
     <ul id="nav">
         <li>
             <a href="#">一级菜单</a>
             <ul class="subNav">
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
             </ul>
         </li>
         <li>
             <a href="#">一级菜单</a>
             <ul class="subNav">
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
                 <li><a href="#">二级菜单</a></li>
             </ul>
         </li>
         <li><a href="#">一级菜单</a></li>
         <li><a href="#">一级菜单</a></li>
         <li><a href="#">一级菜单</a></li>
         <div class="clear"></div>
     </ul>
     <script src="jquery.min.js"></script>
     <script type="text/javascript">
      $('#nav>li').hover(
          function(){
              $(this).find("ul").animate({height:"150px"}, 200)
          },
          function(){
              $(this).find("ul").animate({height:0}, 200)
          }
          )
     </script>
 </body>
 </html>

同样的效果用jquery实现会简单的多。代码如上