如何在导航菜单上显示鼠标悬停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(); 
});