Question

I do have a research regarding this drop down menu. And below are the codes.

HTML:

<div id="top_nav">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Two</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Three</a></li>
        <li><a href="#">Menu Four</a>
            <ul>
                <li><a href="#">The Quick</a></li>
                <li><a href="#">Brown Fox</a></li>
                <li><a href="#">Jumps Over</a></li>
                <li><a href="#">The Lazy</a></li>
                <li><a href="#">Dog</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

#top_nav { width: 700px; margin: 20px auto 0 auto }
    .nav { font-family: Arial, Helvetica, sans-serif; font-size: 14px }
    .nav > li { float: left; margin-right: 7px; list-style: none; position: relative }
    .nav > li > a { height: 30px; line-height: 30px; padding: 0 15px; background-color: red; color: white; text-decoration: none; display: block }
    .nav > li > a:hover { background-color: blue }
    .nav > li > ul { background-color: brown; position: absolute; width: 120px; padding: 0; list-style: none; display: none }
    .nav > li > ul li a { color: white; text-decoration: none; padding: 7px; display: block }
    .nav > li > ul li a:hover { background-color: yellow; color: red }

and the jQuery code:

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })

As you can see. The drop down effect shows smoothly. But when the user tries to move the mouse faster from left to right, selecting all the top list menus, the drop down effects continue to finish even if not necessary.

What is the missing code in jQuery for this?

Thank you for the help.

Answer 1

Try

$(".nav > li").mouseover(function(){
        $(this).find("> a").css("background-color", "blue");
        $(this).find("ul").stop().fadeIn(500);
    })
    $(".nav > li").mouseleave(function(){
        if($(this).children().size() > 1){
            $(this).find("ul").stop().fadeOut(200, function(){
                $(this).prev().removeAttr("style");
            });
        } else {
            $(this).find("> a").removeAttr("style");
        }
    })