发新贴  快速回复

鼠标一离开导航菜单,二级菜单就隐藏,移不到二级菜单

wky1682008
2015-12-28 09:27
<!DOCTYPE html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;list-style:none; font-size:16px;font-family:"宋体";}
a{ text-decoration:none;}
ul{width:1000px; margin:50px auto 20px;background:#000; height:35px; position:relative;}
li{ float:left; display:inline;width:76px; border-right:1px solid #313131;text-align:center;}
li:nth-last-of-type(1){border-right:none;}
a{color:#fff; display:block;height:35px;  line-height:35px;}
a:hover{background:#d61800;}
.nex{ position:absolute;left:0;top:35px; width:100%; height:16px;background:#d61800;padding:13px 0 13px;font-size:12px; text-align:left; text-indent:28px;display:none;}
.nex a{ display:inline; padding:0 28px;border-right:1px solid #fff; height:16px; line-height:16px;}
.nex a:nth-last-of-type(1){border-right:none;}
.pic{width:1000px; height:81px; margin:0 auto; background:url(zuoye9.png) no-repeat;}
</style>
<script>
window.err==function(){
    var aUl=document.getElementsByTagName('ul')[0];
    var aLi=aUl.getElementsByTagName('li');
    var len=aLi.length;
    //alert(len);
    for(var i=0;i<len;i++){
        if(i==0){
            aLi[i].err==function(){
                this.style.background='#d61800';
            }
            aLi[i].err==function(){
                this.style.background='#000';
            };
        }else{
            aLi[i].err==function(){
                this.style.background='#d61800';
                this.getElementsByTagName('div')[0].style.display='block';
            };
            aLi[i].err==function(){
                this.style.background='#000';
                this.getElementsByTagName('div')[0].style.display='none';
            };
        }
    };
};
</script>
</head>

<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">服饰</a>
            <div class="nex">
                <a href="#">流行点</a>
                <a href="#">秀场</a>
                <a href="#">搭配</a>
                <a href="#">街拍</a>
                <a href="#">配饰</a>
                <a href="#">一日一look</a>
                <a href="#">流行趋势</a>
                <a href="#">腕表</a>
                <a href="#">珠宝</a>
            </div>
        </li>
        <li><a href="#">美容</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀场</a>
                <a href="#">搭配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">偶像</a>
            <div class="nex">
                <a href="#">流行点</a>
                <a href="#">秀场82</a>
                <a href="#">搭配</a>
                <a href="#">1街拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">乐活</a>
            <div class="nex">
                <a href="#">45流行点</a>
                <a href="#">秀场</a>
                <a href="#">搭7配</a>
                <a href="#">街拍</a>
                <a href="#">配1饰</a>
             </div>
        </li>
        <li><a href="#">男士</a>
            <div class="nex">
                <a href="#">流行点</a>
                <a href="#">秀场</a>
                <a href="#">搭414配</a>
                <a href="#">街拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">健康</a>
            <div class="nex">
                <a href="#">流行点</a>
                <a href="#">秀场</a>
                <a href="#">搭11配</a>
                <a href="#">街拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">视觉</a>
            <div class="nex">
                <a href="#">流行点</a>
                <a href="#">秀场11</a>
                <a href="#">搭配</a>
                <a href="#">街拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">视频</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀场</a>
                <a href="#">搭配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">活动</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀场</a>
                <a href="#">搭配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">专题</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀场</a>
                <a href="#">搭配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">分享</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀场</a>
                <a href="#">搭oo配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
        <li><a href="#">流行</a>
            <div class="nex">
                <a href="#">流7行点</a>
                <a href="#">秀pp场</a>
                <a href="#">搭配</a>
                <a href="#">街789拍</a>
                <a href="#">配饰</a>
             </div>
        </li>
    </ul>
    <div class="pic">
    </div>
</body>
</html>


kongjiea
给二级菜单消失的时候 设置一个延迟  setTimeout()
2015-12-28 09:47  回复本帖
qq530196938
不知道为啥,貌似单独使用鼠标移出事件会出问题。。= =假如你把onclick改成onmouseover就没问题了。。。
2015-12-28 21:20  回复本帖
jayden
你把一级菜单里的每一个点击对象放入一个ul里面,一级菜单的每一个点击对象单独和它的二级菜单放入一个ul当中这样你onmouseover就不会隐藏二级菜单了,因为都是在一个区域,。
2015-12-30 06:07  回复本帖
jayden
或者你把二级菜单设置成onmouseout,这样更简单
2015-12-30 06:08  回复本帖
细数惭愧
两种办法解决,
1,用html结构解决,把相应的二级菜单放入一级li中,
2,鼠标移除的时候设置一个超时setTimeout()
2015-12-30 09:12  回复本帖
wky1682008
forum.php?mod=redirect&goto=findpost&pid=46806&ptid=16063
不知道为啥,貌似单独使用鼠标移出事件会出问题。。= =假如你把err=改成err=就没问题了。。。 ...

嗯,试了,还真是如此多谢
2015-12-30 15:48  回复本帖
wky1682008
forum.php?mod=redirect&goto=findpost&pid=46836&ptid=16063
或者你把二级菜单设置成err=,这样更简单

二级菜单设置成onmouerout 好像也不灵回头再试试 多谢 
2015-12-30 15:59  回复本帖
wky1682008
forum.php?mod=redirect&goto=findpost&pid=46839&ptid=16063
两种办法解决,
1,用html结构解决,把相应的二级菜单放入一级li中,
2,鼠标移除的时候设置一个超时setTim ...

二级菜单就是在li里的 只是相对ul有个绝对定位,这样二级菜单的宽度才能是相对于ul的100%
2015-12-30 16:05  回复本帖
正體字
onmouseout --- > onmouseleave
2016-01-01 22:31  回复本帖
wky1682008
forum.php?mod=redirect&goto=findpost&pid=46886&ptid=16063
err= --- > onmouseleave

嗯,试过了,可以,多谢了
2016-01-03 16:36  回复本帖
登录 后才可以发表回复