悬停主菜单tab,右侧悬浮子菜单不显示是什么原因？求帮助！
悬停“商品目录”时，其下方的左侧菜单显示、预期右侧的悬浮子菜单也会同时显示（在尚未hover左侧菜单情况下）；而且当悬停左侧菜单项时，预期右侧悬子浮菜单也会对应轮动显示。但是运行后右侧子菜单未能显示，进一步悬停左侧菜单时，右侧菜单也未相应轮动显示。javascript写的哪里有错吗？谁能给改一下或给个提示（最好直接先给改下，因为对Javascript不熟）？下图显示：悬停"商品目录“时，左侧菜单显示了，但右侧是空的：
代码如下：
<!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 charset="UTF-8"> <title>测试页面</title><style>* {margin:0;padding:0;cursor:pointer;}a { font-family:Microsoft YaHei,Simsun; }.sa {float:left;margin-top:40px;margin-left:40px;position:relative;z-index:9999; width:200px;height:500px; }.sbtn { position:relative;z-index:99999; }
.tnav {display:block;background-color:red;height:36px;}.sa .sbtn h2 { font-size:14px; }.sa .sbtn h2 a { line-height:36px;background-color:; padding-left:10px;width:180px;padding-right:10px; text-decoration:none; height:36px;color:#fff;weight:normal;display:block; }.sa .sbtn h2 a:hover { background-color:purple; }.sa .sbtn ul li.s1 {}
.sa .sbtn ul { position:absolute;z-index:99999; width:200px;height:500px;top:36px;left:0px; list-style:none;display:none;padding-top:10px; background-color:#60a411; }.sa .sbtn ul li { padding-bottom:;zoom:1;clear:both;
}
.sa .sbtn ul li a { padding-left:18px;font-size:12px; margin-top:;line-height:30px; text-decoration:none;color:#fff; }
.sa .sbtn ul li .popmenu { width:800px;height:500px;padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; display:none;position:absolute; }
.sa .sbtn ul li .popmenu dl {clear:both;overflow:auto; color:#666;padding-top:15px; padding-bottom:15px;height:500px; }.sa .sbtn ul li .popmenu dl a {border:0px solid;float:left; line-height:42px;color:#666; margin-left:0px;margin-right:0px; }.sa .sbtn ul li .popmenu dt {float:left; width:70px; }.sa .sbtn ul li .popmenu dd {float:left;border:0px solid; width:680px;margin-left:0px }#one { }
.sa .sbtn:hover ul{display:block}.sa .sbtn ul li:hover{background-color:#f5f5f5;}.sa .sbtn ul li:hover a{color:#666;}
#right-menu{display:none;width:800px;height:500px; padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; position:absolute;top:0px;left:200px;}
</style><script type="text/javascript">window.onload=function(){
var oUl=document.getElementById('one');
var aLi=oUl.children;//获取第一级菜单的四个子标签
for (i=0;i<aLi.length;i++) {
aLi.onmouseover=function(){
this.children.style.display='block';
};
aLi.onmouseout=function(){
this.children.style.display='none';
};
}
};
</script></head>
<body><div class="sa"><div class="sbtn"><div class="tnav"><h2><a href="#">商品目录</a></h2></div><ul><li id="one" class="s1" ><a href="#">女装</a><div class=""id="right-menu" ><dl><dd><a href="#">针织衫</a><a href="#">T恤</a><a href="#">毛衣</a><a href="#">衬衫</a><a href="#">半身裙</a><a href="#">长裙</a><a href="#">短裙</a><a href="#">风衣</a><a href="#">卫衣</a><a href="#">短外套</a><a href="#">夹克</a><a href="#">裤子</a><a href="#">西装</a><a href="#">大码女装</a><a href="#">妈妈装</a><a href="#">旗袍</a><a href="#">唐装</a><a href="#">休闲裤</a><a href="#">阔脚裤</a><a href="#">牛仔裤</a><a href="#">短裤</a><a href="#">打底衫</a><a href="#">打底裤</a><a href="#">吊带</a><a href="#">内衣</a><a href="#">皮衣</a><a href="#">皮草</a><a href="#">礼服</a><a href="#">舞台装</a><a href="#">套装</a></dd></dl></div></li><li id="one" class="" >
<a href="#">男装</a>
<div class=""id="right-menu"><dl><dd>C</dd></dl></div></li><li id="one" class=""><a href="#">男鞋</a><div class="" id="right-menu"><dl><dd>D</dd></dl></div></li></ul></div></div>
</body>
</html>
说错了，首先应该实现：鼠标悬停“商品目录”时出现左侧菜单（位于其下方），这个实现了。然后鼠标继续悬停于左侧菜单项时，右侧显示其对应的悬浮子菜单，移动左侧悬浮位置（左侧菜单项目）时，右侧子菜单交替显现。 忘了说了：
还需要实现：
鼠标移开左、右侧后，整个菜单画面除了“商品目录”之外，全部消失！
也就是说右侧子菜单也消失。
当前，左侧菜单是通过css实现了鼠标移开后消失的。:mrgreen:
页:
[1]