Задержка выпадающего меню jQuery

Question

Я создал раскрывающееся меню 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>

Answer 1

Надеюсь, я правильно понял ваш вопрос:

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