Jquery Drop Down Menu Allows for multiple menus to drop

Question

Here is the jQuery code

$(document).ready(function(){
    $("#menu li").hover(
        function(){
            $(this).children(":hidden").stop().slideDown();
        },
        function(){
            $(this).parent().find("ul").slideUp();
        }
    );
});

The menu drops a unorganized html list which is working fine and is not the issue.

When the menu drops the hidden list it allows for another drop to happen while the other is still sliding up. Is there way to stop the new list from slideing down while the other list is still sliding up?

For example if you look at this websites navigation menu bar it will show you what I mean you can not look at another drop down till the other has returned.

orderstore.co.uk

This is the problem:

Jsfiddle of my problem: http://jsfiddle.net/hSH7e/2/

Answer 1

You need to reset others and then expand this:

$(document).ready(function(){
    $("#menu li").hover(
        function(){
            if ($("#menu li").find("ul:visible").length)
            {
                curMenu = this;
                $("#menu li").find("ul:visible").slideUp(function(){
                    $(curMenu).children(":hidden").stop().slideDown();
                });
            }
            else
                $(this).children(":hidden").stop().slideDown();
        },
        function(){
            $(this).parent().find("ul").slideUp();
        }
    );
});

Fiddle: http://jsfiddle.net/praveenscience/hSH7e/5/