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

Question

我想下拉菜單，例如http://www.huffingtonpost.com網站。 我嘗試將鼠標懸停和鼠標懸停的自定義超時設置為喜歡該站點，但我不能。 這是我的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

對於此菜單，您只能使用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 */

文章

Answer 2

為什么不使用hoverIntent.js插件