jquery菜单向上/向下滑动-当鼠标未移开时保持子菜单打开？

我想创建一个水平菜单，在主菜单上鼠标向下，在鼠标向外移动时鼠标向下

问题是，如果鼠标从一个菜单项移动到另一个也有子菜单项的菜单项，我希望菜单下的div仍然出现

这是HTML

 <div class="menu_it">
                    <ul>
                        <li id="i1"><a href="#">
                          program 1
                            </a>
                            <div class="subMenuWrapper">
                                <ul class="subMenu">
                                    <li> <a href="#"> sub program 1</a></li>
                                      <li> <a href="#"> sub program 1</a></li>
                                            <li> <a href="#"> sub program 1</a></li>

                                </ul> 
                            </div>
                        </li>
                        <li id="i2"> 
                            <a href="#"> program 2</a>

                            <div class="subMenuWrapper">
                                <ul class="subMenu">
                                       <li> <a href="#"> sub program 2</a></li>
                                     <li> <a href="#"> sub program 2</a></li>
                                     <li> <a href="#"> sub program 2</a></li>

                                </ul>
                            </div>
                        </li>
                        <li id="i3" ><a href="#"> sub program 3</a>

                        </li>

 </ul>
</div>
 <div class="noti"><span class="text">
 This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar 
    </span>
</div>

这是我正在研究的问题，如果鼠标从id为1的li移动到id为2的ti li，我如何使用类noti使div保持打开状态

如果有更好的方法使子菜单平稳地上下滑动，我将非常感激。

见此：

$('.menu_it > ul li:has(> div ul)').on('mouseenter', function (e) {

    $(this).find('div').slideDown('fast');
    $('.noti').animate({
        'margin-top': '41'
    });
})
    .on('mouseleave', function (e) {
    $(this).find('div').slideUp('fast');
    if ($('.menu_it > ul li:hover div ul').length != 1) 
        $('.noti').animate({
            'margin-top': '0'
        });
});

---

当我将鼠标放在子菜单中的li上时，它仍然存在问题，它会将.noti向上滑动！现在有什么问题吗？事实上这不是问题。这是合乎逻辑的。当鼠标在上面时，.noti会向上滑动（而不是滑过鼠标）。我怀疑这对于菜单是否合乎逻辑？

$('.menu_it > ul li:has(> div ul)').on('mouseenter', function (e) {

    $(this).find('div').slideDown('fast');
    $('.noti').animate({
        'margin-top': '41'
    });
})
    .on('mouseleave', function (e) {
    $(this).find('div').slideUp('fast');
    if ($('.menu_it > ul li:hover div ul').length != 1) 
        $('.noti').animate({
            'margin-top': '0'
        });
});