延迟jQuery下拉菜单

Question

I've built a jQuery dropdown menu as a fallback from the CSS3 version that's normally used. I'd like to have it delay the dropdown the same way as in the CSS, but I'm not sure how to do it.

Here's the script:

var iconWidth = 34; // default width of navigation <li>'s
var slideWidth = 200; // width of the longest slider
var slideTime = 500; // duration of the sliding animation
var dropHeight = 160; // height of tallest dropdown, should be number of <li>'s x 40
var dropTime = 500; // duration of the dropdown animation

$(function() {

    // expanding

    $("#nav li").not("#logo, .parent li").hover(
        function(){
            $(this).animate({width:slideWidth + "px"},{queue:false,duration:slideTime});
        }, function(){
            $(this).animate({width:iconWidth + "px"},{queue:false,duration:slideTime});
        }
    );

    // dropdown

    $("#nav li.parent").hover(
        function(){
            $(this).children("ul").animate({height:dropHeight + "px"},{queue:false,duration:dropTime});
        }, function(){
            $(this).children("ul").animate({height:"0px"},{queue:false,duration:dropTime});
        }
    );
});

What it currently does is expand both ways at the same time, but I would like it to expand first to the right, then down, then when contracting, first contract up, then left.

So like this:

Hover: 
-->
|
v

Unhover:
^
|
<--

So basically, in steps, not at the same time. Can someone show me how to modify my script to make this work?

Also, how do I make it drop down based on the number of li's in the navigation, rather than a set height?

EDIT: Here's some example HTML:

<ul id="nav">
                <li id="logo">
                    <p>
                        <img src="images/logo.png" />
                    </p>
                </li>
                <li>
                    <p>
                        <a href="#"><img src="images/dashboard.png" /> Go to Dashboard</a>
                    </p>
                </li>
                <li class="parent">
                    <p>
                        <a href="#"><img src="images/nav-item.png" /> Nav-Item</a>
                    </p>
                    <ul>
                        <li>
                            <p>
                                <a href="#">Create a page</a>
                            </p>
                        </li>
                        <li>
                            <p>
                                <a href="#">View All Pages</a>
                            </p>
                        </li>
                    </ul>
                </li>
</ul>

Answer 1

I hope i understood your question correctly:

$(function() {
    // expanding

    $("#nav li").not("#logo, .parent li").hover(
        function(){
            $(this).animate({width:slideWidth + "px"},{duration:slideTime});
        }, function(){
            $(this).delay(slideTime).animate({width:iconWidth + "px"},{duration:slideTime});
        }
    );

    // dropdown

    $("#nav li.parent").hover(
        function(){
            $(this).children("ul").delay(slideTime).animate({height:dropHeight + "px"},{duration:dropTime});
        }, function(){
            $(this).children("ul").animate({height:"0px"},{duration:dropTime});
        }
    );
});