javascript - WordPress 下拉菜单重叠 - 悬停一个打开另一个

Question

所以我正在为 WP 创建一个主题，并且菜单正在运行。我想下拉菜单在后面以某种方式重叠，有时当我将鼠标悬停在一个元素上时，它的子菜单会打开，但是当我将 curses 移到它的子菜单时，它旁边的元素的子菜单会打开。

例子:

有什么想法吗？

编辑:

我注意到，当我将鼠标悬停在顶级菜单项上超过 2 秒，然后将光标移向子菜单时，故障不会发生。

经过大量挖掘后我发现，一旦我将鼠标悬停在顶级菜单项上，我的主题 (Divi) 就会添加一个类，当我将光标移动到另一个时，类被删除，但有一定的延迟，所以当我将鼠标悬停在一个新的顶级菜单项上时，之前悬停的菜单项仍然附加了大约 1 秒的类。

我在主题文件中发现了以下代码，我认为这是罪魁祸首，但是我尝试将 200 更改为 0，但延迟仍在发生(我正在跟踪正在添加和删除的类，因为我悬停使用Chrome 上的开发者工具):

window.et_pb_toggle_nav_menu = function($element, state, delay) {
    if ( 'open' === state ) {
        if ( ! $element.closest( 'li.mega-menu' ).length || $element.hasClass( 'mega-menu' ) ) {
            $element.addClass( 'et-show-dropdown' );
            $element.removeClass( 'et-hover' ).addClass( 'et-hover' );
        }
    } else {
        var closeDelay = typeof delay !== 'undefined' ? delay : 200;
        $element.removeClass( 'et-show-dropdown' );
        $element.removeClass( 'et-touch-hover' );

        setTimeout( function() {
            if ( ! $element.hasClass( 'et-show-dropdown' ) ) {
                $element.removeClass( 'et-hover' );
            }
        }, closeDelay );
    }
};

Answer 1

您是否尝试过在悬停时使用 z-index？像这样的东西:

.item {
    z-index: 0;
    &:hover {
        z-index: 1;
    }
}

我猜现在没有代码可以用作引用。