多级下拉菜单的一个困惑

Question

更新：

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

解决方案有很多哈：

1.

     
    .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实现

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

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

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

<ul>
    <li>
        一级
        <ul>
            <li>二级</li>
        </ul>
    </li>
</ul>   

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

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

<ul>
    <li>一级</li>
</ul>
<ul>
    <li>二级</li>
</ul>

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

Answer 1

xx：hover>xx{
display：block；}

Answer 2

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

Answer 3

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

Answer 4

可以用相邻选择符实现：

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

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

Answer 5

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

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

</div>

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