javascript - 多级下拉菜单的一个困惑-PHP中文网问答

更新：

我还以为我问题描述得挺清楚，现在看来也就这样o(╯□╰)o

解决方案有很多哈：

     
    .ul2{
        display: none;
    }
     .ul1:hover + .ul2{  //只要鼠标离开ul1元素，ul2就消失，
        display: block; 
    }                    
    .ul2:hover{          //我之前的盲点就在这里：ul2消失了还怎么hover
        display: block;  //但是按这种写法是可以的，我猜测是因为ul1，
    }                    //ul2隔得很近，鼠标移动得足够快，不知道能
                         //否有大神解释一下
                         //我给两个ul一个5px的margin，从ul1滑到ul2上
                         //有时候能够成功显示ul2,有时候不能，哈哈

2.在最外部再包上一层元素

3.js,上面两种方法都可以换成js实现

那么问题来了，我现在应该采纳哪位兄台的答案（笑哭

============================================================

我平时写多级菜单都是把子菜单嵌套到上级菜单里面的：

这样鼠标只要在一级和二级元素范围里，二级都会一直display：block，

最近看到阿里的一个多级菜单，层级关系是这样的：


    一级


    二级

这样写的话，鼠标离开一级，二级就会display：none了，如果想进入二级，要怎么做到。
click倒是很简单，hover怎么想都没想出来，感觉应该也挺简单，不知道是不是哪里想岔了

.ul_2nd { display: none; /* 二级默认是隐藏的 */ } .ul_1st:hover + .ul_2nd, /* 一级被hover时，唤醒相邻的二级 */ .ul_2nd:hover { /* 由于二级已经出现了，辣么鼠标挪过去，二级的hover也就自然发生了 */ display: block; }

全部回复(5)

黄舟2017-04-11 10:38:55 5楼

xx：hover>xx{
display：block；}

赞 +0

添加回复

伊谢尔伦2017-04-11 10:38:55 4楼

我写过这种二级和一级分开的，不过是用js实现的

巴扎黑2017-04-11 10:38:55 3楼

你要实现的是什么效果，鼠标只要在一级和二级元素范围里，二级都会一直display：block，这不正是我们想要的吗？嵌套的写法是我平时用的方法，可以无限极循环，也好理解。第二种倒是也可以，如果写也能写出来，但是有点绕，也不利于理解，我认为没有必要思考这样的问题

PHP中文网2017-04-11 10:38:55 2楼

可以用相邻选择符实现：

另外，俩ul可以贴着放啊，改下定位加点padding不就得了。

PHPz2017-04-11 10:38:55 1楼

ul外再加一层p。
鼠标移出外层p时，二级菜单隐藏
<p class='nav'>

<ul>
    <li class='first'>一级</li>
</ul>
<ul>
    <li class='second' hidden>二级</li>
</ul>

</p>

$('.first').mouseover(function(){
$('.second').show();
})
$('.nav').mouseleave(function(){
$('.second').hide();
})