Question

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.

Answer 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.