* { margin: 0; padding: 0; font-size: 14px; }

a { color: #333; text-decoration: none }

ul{ list-style: none; }

.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}

.nav li { float: left; position:relative; height:30px; width:120px }

.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }

.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}

.subNav li a{ background:#ddd }

.subNav li a:hover{ background:#efefef}

/*

window.οnlοad=function(){

var aLi=document.getElementsByTagName('li');

for(var i=0; i

aLi[i].οnmοuseοver=function(){

//鼠标经过一级菜单，二级菜单动画下拉显示出来

var This=this.getElementsByTagName('ul')[0];

clearInterval(This.time);

This.time=setInterval(function(){

This.style.height=This.offsetHeight+16+"px";

if(This.offsetHeight>=120){

clearInterval(This.time);

}

},30)

}

//鼠标离开菜单，二级菜单动画收缩起来。

aLi[i].οnmοuseοut=function(){

var This=this.getElementsByTagName('ul')[0];

clearInterval(This.time);

This.time = setInterval(function(){

This.style.height=This.offsetHeight-16+"px";

if(This.offsetHeight<=0){

clearInterval(This.time);

}

},30)

}

}

}

*/

window.οnlοad=function(){

var aLi=document.getElementsByTagName("li");

for(var i=0;i

aLi[i].οnmοuseοver=function(){

//鼠标经过一级菜单，二级菜单动画下拉显示出来

var aUl=aLi[i].getElementsByTagName("ul")[0];

aUl.style.display="block";

}

aLi[i].οnmοuseοut=function(){

//鼠标离开菜单，二级菜单动画收缩起来

var aUl=aLi[i].getElementsByTagName("ul")[0];

aUl.style.display="none";

}

}

}

一级菜单

• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单

一级菜单

• 二级菜单
• 二级菜单
• 二级菜单
• 二级菜单

一级菜单一级菜单一级菜单