JS代码:
window.onload=function(){ var oDiv=document.getElementById('navMenu'); var aUl=oDiv.getElementsByTagName('ul')[0]; var aLis=aUl.getElementsByTagName('li'); for(var i=0 ;i<aLis.length; i++){ if(aLis[i].getElementsByTagName('ul')){ //条件判断也可以写成:if(aLis[i].childNodes.length>1) aLis[i].onmouseover=function(){ this.getElementsByTagName('ul')[0].style.display='block'; } aLis[i].onmouseout=function(){ this.getElementsByTagName('ul')[0].style.display='none'; } } } }
html代码:
<div id="navsBox"> <div id="navMenu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">软件工程</a> <ul> <li><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">物联网工程</a></li> <li><a href="#">信息管理</a> <ul> <li ><a href="#">JAVA</a></li> <li><a href="#">NET</a></li> </ul> </li> <li><a href="#">网络安全</a></li> <li><a href="#">计算机科学与技术</a></li> </ul> </div>
CSS样式:
*{ margin: 0; padding: 0;} #navsBox{background-color: #eee; width:100%;} #navMenu{width:800px; height: 40px; margin: 0 auto;} ul{list-style: none;} ul li{ float: left; line-height: 40px; text-align: center; position: relative;} a{ text-decoration: none; padding:0 20px; height: 40px; color:#000; display: block;} a:hover { color: #fff; background-color: #666;} ul li ul li{ display:block; background-color: #eee; margin-top: 2px; width:100%;} ul li ul{ position: absolute; left: 0px; top:40px; display: none;} ul li ul li a:hover{ background-color: #06f;}
个人编写,不合理之处还请指正。