slideDown on First Hover Instance

Building a drop down menu with jQuery

[nigassma]

Just wondering why this doesn't fire on the first hover state, but fires on every hover state afterward. Every parent li should slideDown the first time, but it doesn't.

jQuery and I are new friends, so please go easy!

<div id="nav">
 <ul class="tabs">
 <li class="lets hasmore"><a href="#"><span>Lets</span></a> 
<ul class="dropdown">
 <li><a href="#">How We Work</a></li>
 </ul>
</li>

<li class="getto hasmore"><a href="/?page_id=6"><span>Getto</span></a> 
 <ul class="dropdown">
 <li><a href="#">Contact</a></li>
 <li><a href="#">Locate</a></li>
 </ul>
 </li>

 <li class="work hasmore"><a href="/?page_id=5"><span>Work</span></a>
 <ul class="dropdown">
 <li><a href="#">Case Studies</a></li>
 <li><a href="#">Portfolio</a></li>
 </ul>
 </li>
 </ul>
 </div>

jQuery:

$(document).ready(function() { 
$('#logo').animate({ left: 0 }, { duration: 'slow', easing: 'easeInQuad' });
$('#nav li').hover(function () {
$('ul.dropdown').slideDown('slow');
}, function () {
$('ul.dropdown').slideUp('slow');
});
});

[dreamcatcher]

Hi,

You are referencing #logo, but I can`t see that div id anywhere in your code. That somewhere else? Is the code throwing any specific js errors?

dc

[daveVk]

Check the initial style on ul.dropdown, suspect it should be display:none and maybe height:?

[nigassma]

#logo is a separate animation. Bah, daveVk you're help is much appreciated. I had set it to display: block.

Thanks!

On a side note, in this state that it is right now once you roll off the first ul.dropdown the submenu rolls up. Client has asked that if you rollover one of the ul.dropdown's it stays open until you leave the page.

What would be the most efficient way to do that?