CSS子菜单鼠标离开父标签时立即消失问题求助

问题分析 #

你当前的CSS仅在父标签 hover 时触发子子菜单显示，但鼠标从父标签移动到子子菜单的过程中，一旦离开父标签的hover范围，子菜单就会立即隐藏。这是因为子子菜单和父标签之间可能存在空隙，或者你的选择器没有覆盖子菜单自身hover的场景。

解决方案 #

替换你现有的CSS为以下代码，同时确保子子菜单的定位没有脱离父元素的交互范围：

/* 默认隐藏所有目标子子菜单 */
#category-92 .popover,
#category-20 .popover,
#category-162 .popover {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -1px; /* 消除父元素与子菜单的空隙，避免hover中断 */
}

/* 父标签hover时显示子子菜单 */
#category-92:hover > .popover,
#category-20:hover .popover,
#category-162:hover .popover {
    opacity: 1;
    visibility: visible;
}

/* 子子菜单自身hover时保持显示 */
#category-92 .popover:hover,
#category-20 .popover:hover,
#category-162 .popover:hover {
    opacity: 1;
    visibility: visible;
}

关键调整说明 #

1. 结合visibility与opacity：仅用opacity:0时元素仍占空间且可交互，添加visibility:hidden能彻底隐藏元素，配合过渡动画提升体验。
2. 扩展hover触发范围：不仅父标签hover时显示子菜单，子菜单自身hover时也保持显示，确保鼠标在子菜单内时不会消失。
3. 消除空隙：通过margin-top:-1px对齐父元素边框，避免鼠标移动时因空隙导致hover状态丢失。

如果你的子子菜单HTML结构中，popover不是父li的直接子元素，需要根据实际结构调整选择器，确保hover能正确关联到父容器。

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