CSS hover触发巨型菜单时鼠标短暂离开不丢失hover状态的实现方案

优先推荐：纯CSS实现（无需修改DOM和引入JS） #

你之前使用transition-delay不生效的核心原因是display属于离散属性，不支持过渡动画，切换会立即执行。调整方案如下：

1. 将下拉菜单的显隐控制逻辑从display切换为visibility+opacity组合，这两个属性支持过渡延迟，可以实现移出后暂缓隐藏的效果
2. 调整顶部导航项的间距规则，将原来的水平margin改为padding实现，让按钮之间的空隙也属于导航项的hover触发区域，从根源减少hover状态丢失的概率

修改后的SCSS代码如下：

#megamenu-top {
    /* 给外层加flex，让导航项横向排列，消除默认ul的间距 */
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;

    .megamenu-top-item {
        display: flex;
        width: 20%;
        height: 5rem;
        /* 去掉水平auto margin，避免产生导航项外的空隙 */
        margin: 0;
        /* 用padding控制导航项之间的间距，该区域属于li的触发范围 */
        padding: 0 0.5rem;

        .megamenu-top-button {
            width: 100%;
            padding: 5px;
            border-width: 5px 0;
            margin: 1rem auto;
        }

        .megamenu-dropdown {
            /* 替换display:none，支持过渡 */
            visibility: hidden;
            opacity: 0;
            width: 100%;
            position: absolute;
            padding: 5rem 5% 7rem;
            margin-top: 5rem;
            left: 0;
            /* 加过渡，移出时延迟300ms再隐藏 */
            transition: all 0s linear 300ms;

            .megamenu-dropdown-item {
                width: 20%;
                margin: 1rem 6.66%;
                display: flex;

                a {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    padding: 1rem;
                }
            }
        }

        &:hover, &:focus-within, &:active {
            .megamenu-dropdown {
                /* 替换display:flex */
                visibility: visible;
                opacity: 1;
                /* 移入时立即显示，无延迟 */
                transition-delay: 0s;
            }
        }
    }
}

可选方案：JS增强控制 #

如果需要更灵活的调整延迟逻辑、或者需要兼容特殊交互场景，可以搭配少量原生JS实现，逻辑更可控：

const menuItems = document.querySelectorAll('.megamenu-top-item');
let hideTimer = null;

menuItems.forEach(item => {
    // 鼠标移入立即显示
    item.addEventListener('mouseenter', () => {
        clearTimeout(hideTimer);
        item.querySelector('.megamenu-dropdown').classList.add('show');
    });
    // 鼠标移出延迟300ms隐藏
    item.addEventListener('mouseleave', () => {
        hideTimer = setTimeout(() => {
            item.querySelector('.megamenu-dropdown').classList.remove('show');
        }, 300);
    });
});

搭配上面的CSS，只需要把hover触发的样式改为.show类触发即可。

内容的提问来源于stack exchange，提问作者Miska Rantala