1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 var $nav=$('.nav'); 10 var menu_2=('.menu_2'); 11 $nav.mousemove(function(){$(this).find(menu_2).slideDown(500)}); 12 $nav.mouseleave(function(){$(this).find(menu_2).slideUp(500)}); 13 14 15 }) 16 </script> 17 <style type="text/css"> 18 *{padding:0px;margin:0px;} 19 ul,li{list-style-type:none;} 20 body{font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#000} 21 div{margin:50px auto;height:30px;} 22 .menu{height:30px;float:left;} 23 .nav{float:left;width:100px;height:30px;line-height:30px;text-align:center;position:relative;margin-left:1px;background:#CCC;} 24 .ys1{width:100%;height:30px;display:block;float:left;line-height:30px;text-align:center;text-decoration:none;color:#FFF;} 25 .nav:hover .ys1{background:#06F;} 26 .menu_2{width:100px;float:left;position:absolute;top:30px;left:0px;display:none;} 27 .nav_2{width:100px;float:left;height:20px;margin-top:1px;line-height:20px;color:#FFF;text-align:center;background:#09C;} 28 .ys2{width:100px;height:20px;display:inline;float:left;color:#FFF;text-decoration:none;} 29 .ys2:hover{background:#0CF;} 30 31 </style> 32 </head> 33 34 <body> 35 <div> 36 <ul class="menu"> 37 <li class="nav"><a href="#" class="ys1">测试页面</a> 38 <ul class="menu_2"> 39 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 40 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 41 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 42 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 43 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 44 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 45 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 46 </ul> 47 </li> 48 49 <li class="nav"><a href="#" class="ys1">测试页面</a> 50 <ul class="menu_2"> 51 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 52 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 53 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 54 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 55 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 56 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 57 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 58 </ul> 59 </li> 60 61 <li class="nav"><a href="#" class="ys1">测试页面</a> 62 <ul class="menu_2"> 63 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 64 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 65 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 66 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 67 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 68 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 69 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 70 </ul> 71 </li> 72 73 <li class="nav"><a href="#" class="ys1">测试页面</a> 74 <ul class="menu_2"> 75 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 76 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 77 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 78 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 79 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 80 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 81 <li class="nav_2"><a href="#" class="ys2">测试二级</a></li> 82 </ul> 83 </li> 84 85 </ul></div> 86 </body> 87 </html>
二级导航下拉菜单,供新手学习!!高手直接无视!!