超時鼠標懸停和鼠標懸停下拉菜單？

Question

我想打一個菜單下拉像http://www.huffingtonpost.com網站。我試圖自定義超時mouseover和mouseout喜歡該網站，但我不能。這是我的jquery：

var navTimers = []; 
$('.mcats > ul > li').each(function(){ 
$(this).hover(function(){ 
     var $this = $(this); 
     var id = jQuery.data(this); 
     navTimers[id] = setTimeout(function() { 
      $this.addClass('hover'); 
      navTimers[id] = ""; 
     }, 250); 

    }, function(){ 
     var $this = $(this); 
     var id = jQuery.data(this); 
     if (navTimers[id] != "") 
     { 
      clearTimeout(navTimers[id]); 
     } 
     else 
     { 
      navTimers[id] = setTimeout(function() { 
       if(!$this.is(':hover')) 
       { 
        $this.removeClass('hover'); 
        navTimers[id] = ""; 
       } 
      }, 600); 
     } 

    }); 
}); 

這裏是演示http://jsfiddle.net/rebeen/FSKbL/

子菜單後顯示，我用鼠標進出不斷就可以了。 Jquery對我來說工作不好。

任何想法的幫助？非常感謝！

Answer 1

爲什麼不使用hoverIntent.js插件

Answer 2

對於這個菜單中，您可以只使用CSS和HTML：

http://jsfiddle.net/dimitardanailov/m6jVd/

HTML：

<div id="menuh-container"> 
<div id="menuh"> 
    <ul> 
     <li><a href="#" class="top_parent">Item 1</a> 
     <ul> 
      <li><a href="#">Sub 1:1</a></li> 
      <li><a href="#" class="parent">Sub 1:2</a> 
       <ul> 
       <li><a href="#">Sub 1:2:1</a></li> 
       <li><a href="#">Sub 1:2:2</a></li> 
       <li><a href="#">Sub 1:2:3</a></li> 
       <li><a href="#">Sub 1:2:4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Sub 1:3</a></li> 
      <li><a href="#" class="parent">Sub 1:4</a> 
       <ul> 
       <li><a href="#">Sub 1:4:1</a></li> 
       <li><a href="#">Sub 1:4:2</a></li> 
       <li><a href="#">Sub 1:4:3</a></li> 
       <li><a href="#">Sub 1:4:4</a></li> 
       </ul> 
      </li> 
      <li><a href="#" class="parent">Sub 1:5</a> 
       <ul> 
       <li><a href="#">Sub 1:5:1</a></li> 
       <li><a href="#">Sub 1:5:2</a></li> 
       <li><a href="#">Sub 1:5:3</a></li> 
       <li><a href="#">Sub 1:5:</a></li> 
       <li><a href="#">Sub 1:5:5</a></li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 

    <ul>  
     <li><a href="#" >Item 2</a></li> 
    </ul> 
</div> <!-- end the menuh-container div --> 
</div> <!-- end the menuh div --> 

CSS：

#menuh-container 
    { 
    position: absolute;  
    top: 1em; 
    left: 1em; 
    } 

#menuh 
    { 
    font-size: small; 
    font-family: arial, helvetica, sans-serif; 
    width:100%; 
    float:left; 
    margin:2em; 
    margin-top: 1em; 
    } 

#menuh a 
    { 
    text-align: center; 
    display:block; 
    border: 1px solid #0040FF; 
    white-space:nowrap; 
    margin:0; 
    padding: 0.3em; 
    } 

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */ 
    { 
    color: white; 
    background-color: #0040FF;  /* royal blue */ 
    text-decoration:none; 
    } 

#menuh a:hover      /* menu on mouse-over */ 
    { 
    color: white; 
    background-color: #668CFF; /* cornflowerblue */ 
    text-decoration:none; 
    } 

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */ 
    { 
    background-image: url(http://sperling.com/examples/menuh/nav_white.gif); 
    background-position: right center; 
    background-repeat: no-repeat; 
    } 

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */ 
    { 
    background-image: url(http://sperling.com/examples/menuh/nav_white.gif); 
    background-position: right center; 
    background-repeat: no-repeat; 
    } 

#menuh ul 
    { 
    list-style:none; 
    margin:0; 
    padding:0; 
    float:left; 
    width:9em; /* width of all menu boxes */ 
    /* NOTE: For adjustable menu boxes you can comment out the above width rule. 
    However, you will have to add padding in the "#menh a" rule so that the menu boxes 
    will have space on either side of the text -- try it */ 
    } 

#menuh li 
    { 
    position:relative; 
    min-height: 1px;  /* Sophie Dennis contribution for IE7 */ 
    vertical-align: bottom;  /* Sophie Dennis contribution for IE7 */ 
    } 

#menuh ul ul 
    { 
    position:absolute; 
    z-index:500; 
    top:auto; 
    display:none; 
    padding: 1em; 
    margin:-1em 0 0 -1em; 
    } 

#menuh ul ul ul 
    { 
    top:0; 
    left:100%; 
    } 

div#menuh li:hover 
    { 
    cursor:pointer; 
    z-index:100; 
    } 

div#menuh li:hover ul ul, 
div#menuh li li:hover ul ul, 
div#menuh li li li:hover ul ul, 
div#menuh li li li li:hover ul ul 
{display:none;} 

div#menuh li:hover ul, 
div#menuh li li:hover ul, 
div#menuh li li li:hover ul, 
div#menuh li li li li:hover ul 
{display:block;} 

/* End CSS Drop Down Menu */ 

Article