jQuery dropdown is really jumpy

Question

Hi, I'm making a dropdown menu with jquery (some of the code is borrowed from a tutorial by someone, although I forget who...). When I use the dropdown, it slides up and down really fast, and I can't figure it out. What do you think?

HTML

<div id="nav">
  <ul class="topnav">
   <li><a class="selected" href="#" title="home">home</a></li>
   <li><a href="events/" title="events calendar">events</a></li>
   <li><a href="photos/" title="photo gallery">photos</a></li>
   <li><a href="staff/" title="faculty">staff</a>
 <ul class="subnav">
   <li><a href="#">Luke</a></li>
   <li><a href="#">Darth Vader</a></li>
   <li><a href="#">Princess Leia</a></li>
   <li><a href="#">Jabba the Hutt</a></li>
 </ul>
</li>
<li><a href="contact/" title="contact">contact</a></li>

jQuery $(document).ready(function(){ $("ul.subnav").parent() .hover(function() {

 $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover...

 $(this).parent() .hover(function() {
 }, function(){ 
  $(this).parent().find("ul.subnav").slideUp('slow');
 });
 $(this).parent().find("ul.subnav") .hover(function() {
 }, function(){ 
  $(this).parent().find("ul.subnav").slideUp('slow');
 });

 }).hover(function() { 
  $(this).addClass("subhover");
 }, function(){ 
  $(this).removeClass("subhover"); 
});

Answer 1

You can use speed in milliseconds instead 'slow' and 'fast'. Try slideUp(1000) (or 2000-3000 for example). It's should slide up very smooth.

Answer 2

Here is a more simple version of a 1 lvl dropdown, for more levels, its as easy as copy and paste, with a little styles modification. Hope it helps you

<script type="text/javascript">
$(document).ready(function(){

$('.menu-option').hover(mouse_in, mouse_out);
function mouse_in(){
     $(' > div', this).slideDown("normal");
}
function mouse_out(){
        $(' > div', this).slideUp("fast");
}

});

</script>
      <style type="text/css">
ul div
{
    display: none;
}
div{
    display :table-cell;
    position: absolute;
}
.menu-option{
    display: block;
    float: left;
    width: 120px;

}
.menu-option ul{
    z-index: 100;
}
</style>


<ul>    <li class="menu-option"> MENU 1
            <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>   <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>
        <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>
        <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li> </ul>