Search code examples
jqueryslidedownslideupmouseenter

jQuery on mouseover and leave

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.

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