<!doctype html> <html> <head> <meta charset="utf-8"> <title>js版本下拉菜单</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none; color:#000;} #top{ margin:0 auto; 980px;} .top-nav{ height:40px;} .top-nav li{ float:left;200px; line-height:40px; background:#E5383B;} .top-nav li a{ display:block; text-align:center; color:#fff;} .top-nav li a:hover{ background:#FC6D70; color:#F0F0F0;} .top-nav li .se-nav{ display:none;} .top-nav li .se-nav li{ height:45px; line-height:45px;} </style> <script type="text/javascript"> window.onload=function(){ var oTop=document.getElementById('top'); var oTopNav=document.getElementById('topNav'); var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ var seNav=this.getElementsByTagName('ul')[0] if(seNav!=undefined){ seNav.style.display='block'; } } aLi[i].onmouseout=function(){ var seNav=this.getElementsByTagName('ul')[0] if(seNav!=undefined){ seNav.style.display='none'; } } } } </script> </head> <body> <div id="top"> <ul class="top-nav" id="topNav"> <li><a href="#">首页</a></li> <li> <a href="#">课程大厅</a> <ul class="se-nav"> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li> <a href="#">关于我们</a> <ul class="se-nav"> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> </ul> </div> </body> </html>