Question

Here’s a sample: http://jsbin.com/idepo/5

The padding and everything seems to look better when not using that, but oh well. My question is, if you click one of the menu items (right now, only the left most one will do anything) then a list of sub menu items slides down. What I would like to do is have one slide down, then another slide down below that (once the first is done animating), so on and so forth. As of now, they slide down as one object. Also, as a side question, is there a better way to navigate to the '.menuItem' part instead of going parent -> children -> children?

EDIT::

Updated the JS with my latest attempt involving recursion, but now nothing happens. Here is the new script:

$('.menu')
    .click( function() { 
            var menu = $(this).parent().children('.menuItem').children();
            openMenu( menu ); }
    );

function openMenu ( menu ) {
    if ( menu.length > 0 ) {
        var subMenu = menu.shift();
        $(subMenu)
            .css( { top:$(this).position().top, left:$(this).position().left } )
            .slideDown( 'normal', function () { 
                openMenu( menu ); } 
            );
    }
}

::End EDIT

Here’s the relevant source:

$('.menu')
    .hover(  
        function(event) { $(this).toggleClass('highlighted'); }
    )
    .click(
        function(event) { $(this).parent().children('.menuItem').children().each( 
            function() {
                $(this)
                    .css( { top:$(this).position().top, left:$(this).position().left} )
                    .slideDown();
            });
        }
    );

---

<div class='box'>
    <div>
        <div class='menu'>Resources</div>
        <div class='menuItem'>
            <div>Library</div>
            <div>Internet</div>
            <div>Your mom</div>
        </div>
    </div>
</div>

Answer 1

I ended up using recursion:

$('.menu')
    .mouseover( function() {
        var subMenu = [];

        $(this).next().children().each( function() {
            subMenu.push( $(this) );
        });

        pullDownMenu(subMenu);
    })
    .mouseout( function() {
        $(this).next().children().each( function() { $(this).stop(true, true); } );
    });

function pullDownMenu(subMenu) {
    var menu = $.makeArray(subMenu);
    if ( menu.length == 0 )
        return;
    else {
        var menuItem = menu.shift();
        $(menuItem).slideDown(100, function() { pullDownMenu(menu); });
    }
}