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>
同样的效果用jquery实现会简单的多。代码如上