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