如何在導航菜單上顯示鼠標懸停10秒？

Question

代碼：

<style> 
    .subnav-show { 
    display: block; 
} 
</style> 

<script> 
$(document).ready(function() {  
    $('.nav li').hover(
     function() { 
      $('ul', this).addClass('subnav-show').delay(2000).queue(function(){ 
      $(this).removeClass('subnav-show').dequeue(); 
     });    
    }); 
}); 
</script> 

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src="logo.png" alt=""/></a> 
     </div> 
     <div class="navbar-collapse collapse "> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown mega-dropdown"> 
        <a href="#" id="home" class="dropdown-toggle" data-toggle="dropdown" >home</a>    
        <ul class="dropdown-menu mega-dropdown-menu" id="div2"> 
         <li class="col-sm-3"> 
          <p>menu1</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu2</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu3</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu4</p> 
         </li> 
        </ul>    
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

在這段代碼中我已經創造了大量的菜單導航欄時，我鼠標移到菜單上則表現出較大的下拉欄，當我從菜單中刪除鼠標後，突然大下拉菜單中的隱藏。現在，我的問題是如何將鼠標懸停在菜單上10秒鐘的大菜單欄和如果我從菜單中刪除鼠標然後它顯示大菜單10秒後隱藏？請幫幫我。

謝謝

Answer 1

試試這個：

https://www.bootply.com/64081

jQuery('ul.nav li.dropdown').hover(function() { 
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(); 
}, function() { 
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(); 
});