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

Question

我想创建一个横向菜单，这个菜单在主菜单上向下移动鼠标，在鼠标移出时向下移动。

问题是，如果鼠标从一个菜单项移动到另一个也具有子菜单的菜单项，我希望菜单下的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> 

这里是JS

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


        $(this).find('div').slideDown('fast'); 
       $('.noti').animate({'margin-top':'41'}); 


      }) 
      .on('mouseleave',function(e) { 
      console.log('out'); 

       $(this).find('div').slideUp('fast'); 
       $('.noti').animate({'margin-top':'0'}); 


      }); 

这里是我工作的example，我怎样才能使分度类的NotI犹若从李鼠标移动开放with id 1 ti li with id2

如果有更好的方法来顺滑滑动submeu我会非常感激。

Answer 1

看到这个：

$('.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' 
     }); 
}); 

DEMO