CSS下拉菜单中的jQuery UX故障

Question

下面是一个有一些错误的脚本，我正在努力解决问题。主要错误是当前选择（悬停）项目的子菜单和以前选择的子菜单之间的混淆或混淆。

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

该错误不会出现在每个父项的初始悬停上，但似乎只发生as can be seen from this fiddle，如果悬停在第二个父项上，然后悬停在第一个父项上，然后快速悬停到第一个子菜单，您将看到所需的子菜单消失，而之前选择的子菜单重新出现。另外，我还应该补充一点，如果将鼠标悬停在第 3 个父项上，然后将鼠标悬停在第 2 个父项上，然后快速悬停到第 2 个子菜单，您将再次看到不希望的效果或错误。

另一个不太详细的错误或故障是，在正确组合或随机悬停数量后，3 个子菜单中的 1 个永久消失。基本上，脚本很不稳定；如何使这个脚本成为坚如磐石的 UI？如何消除这些错误以确保最佳用户体验？谢谢。

Answer 1

问题是您正在捕捉第二个子菜单，而它仍然可见并且它被视为再次悬停它。

您可以通过更新与悬停元素对应的子菜单的 z-index 来轻松解决此问题：

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

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