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