jQuery on mouseover and leave

Question

I have the following jQuery, when a list item in my menu is moused over it will find if .sub-menu exists and .slideDown() and on leave it will .slideUp().

My problem is 2 of the submenus are around 205px high and the third is 54px high and every so often 1 of the larger .sub-menu will only goto 54px in height.

Is there a way to improve my jQuery below and also fix the height issue?

$("body").on("mouseenter", ".main-menu > ul > li", function(){
    $(this).find('.sub-menu').slideDown();
}).on("mouseleave", ".main-menu > ul > li", function(){
    $(this).find('.sub-menu').stop().slideUp();
});

Unfortunately I wont be able to post any html do to the size of the menu.

Answer 1

$(".main-menu > ul > li").hover(function () {
        $(this).find('.sub-menu').stop(true,true).slideToggle("slow");
    });

Answer 2

Have you seen how hover() works? One possible solution is:

$("body").hover(function(){ $(this).find('.sub-menu').slideDown(); }, 
function() { $(this).find('.sub-menu').stop().slideUp(); });