Drop Down Menu Cut-off After Slideout

I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout. The problem comes after hovering through all of the nest

Solution 1:

Please see this fiddle: http://jsfiddle.net/SuRJ9/

The code I've changed:

functionslideDown(toSlide) {
    currentHover(toSlide);
    $($(toSlide).children('ul')[0]).slideDown('medium',
        function(){   $(this).css('overflow','visible') });
}

I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.

Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.

Solution 2:

$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.

Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.