jQuery: drop downs getting cut off

I have a simple dropdown menu, and to stop the build up of the animation I used the stop() instruction, but now, when I test the menu and hover in and out of the menu, the dropdowns get 'cut off' whenever I want to see them completely.

Not sure if this makes sense.

Here's t开发者_StackOverflowhe script I'm using though:

$(function(){
 $('.dropdown ul').hide();
 $("ul.dropdown li").hover(function(){    
    $(this).addClass("hover");
    $('ul:first',this).stop().slideDown();

 }, function(){    
    $(this).removeClass("hover");
    $('ul:first',this).stop().slideUp();
 });
});

Where do I have to put the stop()?

Any help would be greatly appreciated.

I'd use .stop(true, true) here so the height is never left mid-way, like this:

$(function(){
  $('.dropdown ul').hide();
  $("ul.dropdown li").hover(function(){    
    $(this).addClass("hover");
    $('ul:first',this).stop(true, true).slideDown();    
  }, function(){    
    $(this).removeClass("hover");
    $('ul:first',this).stop(true, true).slideUp();
  });
});

The second true argument tells it to finish the animation, jumping to the end of it, so even if you cut off a .slideDown() animation, it'll be from the max height of the element...not cut off somewhere in-between.