Question

I have a drop down menu made with Jquery.

Right now, if you hover over all the menu items, their submenus will all show at the same time.

I would like that if I hover over one menu, then go to the next, that the previous menu’s submenu will slide back up. As it is now, I have to hover out of the submenus for them to slide up.

To put it simpler, when hovering over a parent menu, slide up all other parent menu’s submenus if they’re open.

$("#DropDownMenu li.parent").hover(function() {
        $(this).find(".subMenu").slideDown('fast').show();

        $(this).parent().find(".subMenu").hover(function() {
        }, function() {
            $(this).parent().find(".subMenu").slideUp('slow');
        });
    });    

The markup is basically like this,

<ul id="DropDownMenu">
<li class="parent"><a>Link1</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>
<li class="parent"><a>Link2</a>
        <ul class="subMenu">
                <li><a>SubLink1</a></li>
                <li><a>SubLink2</a></li>
        <li><a>SubLink3</a></li>
        <li><a>SubLink4</a></li>
        </ul>
    </li>

Answer 1

I’ve managed to figure it out! By using .siblings() I can slideUp all the other parent’s submenu’s.

$("#DropDownMenu li.parent").hover(
        function() {
            $(this).find(".subMenu").slideDown('fast');
            $(this).siblings().find(".subMenu").slideUp('slow');

            $(this).parent().find(".subMenu").hover(function() {
            }, function() {
                $(this).parent().find(".subMenu").slideUp('slow');
            });
        });