Ciao ragazzi
Sto realizzando una serie di menu a tendina con diversi tipi di effetti di discesa,
ho appena realizzato la beta di un menu con appunto la proprietà slideDown e un effetto easing.
Funziona bene ed in maniera gradevole ma questo effetto non funziona appena si carica la pagina...nel senso che bisogna effettuare un primo over sui link e solo ai successivi l'effetto animato delle tendine viene mostrato
Soluzioni? E scusate se ho riempito troppo la pagina...grazie sin da ora

Posto il codice html css e jquery del menu nel caso servisse per capire meglio il bug

HTML

<ul id="nav">[*]
Home
[*]
Mail
<ul>[*]Compose mail
<li class="sep">Inbox<span></span>[*]Sent mail[*]Spam[/list]
[*]
Settings
<ul>
<li class="icon settings">Account settings
<li class="icon privacy">Privacy settings[/list]
[/list]

CSS

ul#nav{
font: 70%/1.5 Verdena,Tahoma,sans-serif
}
ul#nav,ul#nav li,ul#nav ul{
margin:0;padding:0;list-style:none
}
ul#nav{
height:26px;line-height:26px;margin-left:50px;
background: #3B5998;color: #fff
}
ul#nav a{
display:block;padding: 0 15px;text-decoration: none; color:#FFF
}
ul#nav li{
float: left;position: relative
}
ul#nav li li{
float: none;line-height: 22px;
display:block !important;display: inline; /*IE*/
}
ul#nav ul{
position: absolute;top: 23px;left: -9999px;
width: 12em;background: #fff;color: #3B5998
}
ul#nav ul{
padding: 7px 0;border: 1px solid #3B5998
}
ul#nav ul,ul#nav li li a{
background-color: #FFF;color: #3B5998
}
ul#nav li:hover,ul#nav a:hover{
background-color: #5C75AA;color: #FFF
}
ul#nav li:hover ul,ul#nav li.sfhover ul{
left: -1px;z-index: 100
}

JQUERY

$(document).ready(function () {
$("#nav li").hover(
function () {
//mostra sottomenu
$("ul", this).stop(true, true).slideDown({queue:false, duration:600, easing: 'easeOutBounce'});

},
function () {
//nascondi sottomenu
$("ul", this).stop(true, true).slideUp(200);
}
);
});