查看: 563|回复: 0

javascript悬停左侧菜单时右侧菜单不显示是什么原因?求帮助!

[复制链接]
论坛徽章:
0
发表于 2018-12-6 22:06 | 显示全部楼层 |阅读模式
首先应该实现:鼠标悬停“商品目录”时出现左侧菜单(位于其下方),这个实现了。然后鼠标继续悬停于左侧菜单项时,右侧显示其对应的悬浮子菜单,移动左侧悬浮位置(左侧菜单项目)时,右侧子菜单交替显现。
此外还需要实现:
鼠标移开左、右侧后,整个菜单画面除了“商品目录”之外,全部消失!

也就是说右侧子菜单也消失。当前,左侧菜单是通过css实现了鼠标移开后消失的。
当前的问题是:
运行后右侧子菜单未能显示,进一步悬停左侧菜单时,右侧菜单也未相应轮动显示。



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;cursorointer;}
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-colorurple;
                        }
.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[0].style.display='block';

};


aLi.onmouseout=function(){


this.children[0].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>








bug-a.png

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表