/* HTML部分 */
<ul id="ul">
<li class="borl"><a href="javascript:;">首页</a></li>
<li>
<a href="javascript:;">一级导航</a>
<ul>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
</ul>
/* CSS部分 */
.first{height: 45px;background: #cff;min-width: 1000px;}
.first>ul{width: 1000px;height: 45px;margin:0 auto;}
.first li{width: 164px;height: 45px;line-height: 45px;border-right: 2px solid #fff;text-align: center;font-size: 14px;float: left;}
.first .borl{border-left: 2px solid #fff;}
.first a{display: block;color: #0a0;}
.first>ul>li{position: relative;}
.first>ul>li>a:hover{background: #0fd;}
.first li ul{display: none;position: absolute;top: 45px;left: 0;}
.first li ul li{margin-top: 1px;}
.first li ul a{background: #cff;}
.first li ul a:hover{background: #afc;}
/* JS部分 */
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display='block';
};
aLi[i].onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display='none';
};
}
anet