1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js之下拉菜单</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 ul{list-style:none;} 9 #nav{width:500px;height:30px;background:lightseagreen;} 10 #nav li{width:100px;float:left;} 11 #nav li a{display:block;width:100px;height:30px;line-height:30px;color:#000;text-decoration:none;text-align:center;} 12 .sub{display:none;} 13 .sub li{width:100px;text-align:center;padding:5px 0;} 14 </style> 15 <script type="text/javascript"> 16 window.onload=function(){ 17 var divs=document.getElementById("nav"); 18 var lis=divs.getElementsByClassName("dropdown"); 19 //console.log(lis); 20 21 for(i=0;i<lis.length;i++){ 22 var index=lis[i]; 23 index.onmouseover=function(){ 24 this.getElementsByTagName("ul")[0].style.display="block"; 25 } 26 27 index.onmouseout=function(){ 28 this.getElementsByTagName("ul")[0].style.display="none"; 29 } 30 } 31 32 33 } 34 </script> 35 </head> 36 <body> 37 <ul id="nav"> 38 <li><a href="#">首页</a></li> 39 <li class="dropdown"><a href="#">学校简介</a> 40 <ul class="sub"> 41 <li>研究生</li> 42 <li>本科招生</li> 43 <li>继续教育</li> 44 </ul> 45 </li> 46 <li><a href="#">师资队伍</a></li> 47 <li class="dropdown"><a href="#"><span>招生就业</span><i></i></a> 48 <ul class="sub"> 49 <li>研究生</li> 50 <li>本科招生</li> 51 <li>继续教育</li> 52 </ul> 53 </li> 54 <li><a href="#">学术研究</a></li> 55 </ul> 56 </body> 57 </html>
效果：
