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 nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.

Link to jsFiddle

Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.

回答1:

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

The code I've changed:

function slideDown(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.

回答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.

来源：https://stackoverflow.com/questions/12020534/drop-down-menu-cut-off-after-slideout