Question

Below is a script with a few bugs and I am trying to work out the kinks. The main bug is a confusion or mix-up between currently selected(hovered) items’ sub-menus and previously selected sub-menus.

jQuery(document).ready(function($) {
    $("ul.menu > li").hover(
        function() {
            $(this).find("ul.sub-menu").stop().animate({
                height: 'toggle',
                opacity: 'toggle'
            });
        }
    );
});

The bug doesn’t appear on the initial hover of each parent item but seems to only happen, as can be seen from this fiddle, if hovered over the 2nd parent item, then hover the 1st parent, and then quickly hover into 1st sub-menu, you will see the desired sub-menu disappear, and the previously selected sub-menu reappears. Also, I should also add that if hovered over the 3rd parent item, then hover over the 2nd parent, and then quickly hover into 2nd sub-menu, you will again see the undesired effects, or bug.

Another less detailed bug or glitch is that after the right combination or amount of random hovers 1 of 3 sub-menus permanatly disappears. Basically, the script is very unstable; how can I make this script a rock solid UI? How can these bugs be eliminated to ensure the best UX? Thanks.

Answer 1

Problem is that you are catching the second sub menu while it is still visible and it counts as hovering it once again.

You can solve this pretty easily by updating the z-index for the sub-menu corresponding to the hovered element:

$("ul.sub-menu").css('z-index', 1);
$(this).find("ul.sub-menu").css('z-index', 2).stop()...

http://jsfiddle.net/pF8wZ/6/