不管鼠标移动到哪一个一级菜单都是第一个二级菜单出现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画菜单</title>
<style>
*{margin:0px;padding:0px;}
ul{list-style:none;}
#topnav li{display:inline-block;width:100px;height:30px;line-height:30px;background:#999;margin:0px -2px;padding:0px;text-align:center;border-bottom:2px solid #455;}
.con ul{float:left;}
.con ul li{text-align:center;height:30px;background:#fef;margin:0px -3px;position:relative;top:-2px; width:100px;line-height:30px}
.hide {display:none}
.show {display:block }
</style>
</head>
<script>
window.onload=function(){
var aul=document.getElementById("navcon");
var atop=document.getElementById("topnav");
var au=aul.getElementsByTagName('ul');
var ali=atop.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onmouseover=function(){
this.style.backgroundColor="#fef"
au[this.index].className=""
}
ali[i].onmouseout=function(){
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="topnav">
<li>一级菜单</li>
<li>一级菜单</li>
<li>一级菜单</li>
<li>一级菜单</li>
<li>一级菜单</li>
</ul>
<div class="con" id="navcon">
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</div>
</div>
</body>
</html>不管鼠标移动到哪一个一级菜单都是第一个二级菜单出现，这是怎么回事
