巨型菜單：子​​菜單項不會停留

Question

我正在嘗試開發一個像Godaddy這樣的大型菜單。我已經實現了這種滑動和滑動效果等，但我不確定，當子菜單中的某個項目被徘徊時，如何才能使此子菜單保留下來（現在，只要我拿走我的子菜單將鼠標移出頂部菜單項（因爲它甚至會因爲鼠標移動而出現））？我的HTML和JS的樣子：

<div class="nav-wrap"> 
<ul class="group main-nav"> 
    <li><a href="#" data-subnav="define-subnav" class="nav-item">Definitions</a></li> 
    <li><a href="#" data-subnav="voucher-subnav" class="nav-item">Vouchers</a></li> 
    <li><a href="#" data-subnav="final-subnav" class="nav-item">Final</a></li> 
    <li><a href="#" data-subnav="reports-subnav" class="nav-item">Reports</a></li> 
</ul> 
<ul class="nav-down-content sub-nav"> 
    <li id="define-subnav"> 
     <div class="nav-item-content group"> 
      <div class="nav-chunk"> 
       <h2>Definitions</h2> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li id="voucher-subnav"> 
     <div class="nav-item-content group"> 
      <div class="nav-chunk"> 
       <h2>Vouchers</h2> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li id="final-subnav"> 
     <div class="nav-item-content group"> 
      <div class="nav-chunk"> 
       <h2>Finals</h2> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li id="reports-subnav"> 
     <div class="nav-item-content group"> 
      <div class="nav-chunk"> 
       <h2>Reports</h2> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
      <div class="nav-chunk"> 
       <ul> 
        <li><a href="#">Party</a></li> 
        <li><a href="#">Item</a></li> 
        <li><a href="#">Godown</a></li> 
        <li><a href="#">Account Level</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
</ul> 

這裏是JavaScript：

$(function(){ 
    $('.main-nav>li>a').on('mouseover', function(){ 
     var navContentId = $(this).data('subnav'); 
     $('#'+navContentId).slideDown();  
    }); 

    $('.main-nav>li>a').on('mouseout', function(){ 
     var navContentId = $(this).data('subnav'); 
     $('#'+navContentId).slideUp(); 
    }); 
}); 

的jsfiddle這裏：http://jsfiddle.net/G6Dyn/

Answer 1

最後，使子菜單stop和slideDown上mouseover和stop和slidUp在mouseout爲我工作。這是我的意思是說：

$('.sub-nav>li').on('mouseover', function(){ 
    $(this).stop().slideDown(); 
}); 

$('.sub-nav>li').on('mouseout', function(){ 
    $(this).stop().slideUp(); 
});