延迟jQuery下拉菜单

我已经构建了一个jQuery下拉菜单，作为通常使用的CSS3版本的后备。我想让它延迟下拉菜单的方式相同的CSS，但我不确定如何做到这一点。

脚本如下:

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});
        }
    );
});

它目前的做法是同时向两个方向扩展，但我希望它先向右扩展，然后向下，然后收缩时，先向上收缩，然后向左。

像这样:

Hover: 
-->
|
v
Unhover:
^
|
<--

所以基本上是分步进行，而不是同时进行。有人能告诉我如何修改我的脚本，使这项工作?

另外，我如何使它根据导航栏中li的数量下拉，而不是设置高度?

编辑:这里有一些示例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>