javascript简易下拉菜单效果

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;}

个人编写，不合理之处还请指正。