jQuery实现二级菜单鼠标无法进入二级菜单

Question

使用jQuery通过mouseover mouseout写一个二级菜单发现鼠标在一级菜单的时候，使用了事件委托，做出来的效果是：能够显示二级菜单，但是鼠标移到二级菜单时，二级菜单会消失，求解答是为什么（我只能想到是因为event.target变化了，但是此时的event.target指向哪呢？）。使用事件委托到底能不能实现这个功能呢？
下面是我的代码部分。
HTML代码如下：

JS代码如下

$(".ul").mouseover(function(e){

    if((e.target.nodeName).toLowerCase() =="li"){

    $(e.target).css("background","orange").children(".menu").css("display","block");

}

})

$(".ul").mouseout(function(e){

// $(this).children(".menu1").css("display","none");

    $(e.target).css("background","lightgrey").children(".menu").css("display","none");

})

我知道其他两种方法实现二级菜单，一种是用css中的hover 实现，另一种是在JS中去遍历元素给当前元素添加mouseover/mouseout事件来实现。大家还有其他的方法吗？

Answer 1

当鼠标移向二级菜单时，不就正好移出一级菜单么……所以移入显示的逻辑好写，移出就得需要进一步判断才行。一般建议把隐藏加到二级菜单的点击和移出事件上，会比较合理些。