js之原生下拉菜單
阿新 • • 發佈：2017-07-21
rip title 繼續教育 over images 500px 簡介 span 首頁
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 21for(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>
效果：
js之原生下拉菜單