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

    <ul class="ul">
        <li class="li1">第一栏
            <ul class="menu">
                <li>ul li1</li>
                <li>ul li2</li>
                <li>ul li3</li>
                <li>ul li4</li>
            </ul>
        </li>
        <li class="li2">第二栏
            <ul class="menu">
                <li>ul li1</li>
                <li>ul li2</li>
                <li>ul li3</li>
                <li>ul li4</li>
            </ul>
        </li>
    </ul>

</div>

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事件来实现。大家还有其他的方法吗？