Vite/React项目中NavigationBar子菜单无法点击且鼠标移动即收起

常见解决方法： #

1. 填补父菜单与子菜单的间隙 #

鼠标在父菜单和子菜单之间的空白区域移动时，会触发父元素的mouseleave事件导致菜单收起。你可以通过CSS调整消除这个间隙：

• 给父菜单元素增加底部内边距，扩大hover触发区域
• 给子菜单设置负的上边距，拉近与父菜单的距离

示例代码：

.nav-parent-item {
  position: relative;
  padding-bottom: 10px; /* 让hover区域覆盖到子菜单上方 */
}

.nav-submenu {
  position: absolute;
  top: 100%;
  margin-top: -3px; /* 抵消间隙 */
}

2. 优化交互事件逻辑 #

如果是用React的onMouseEnter/onMouseLeave控制菜单显隐，可能需要调整事件监听范围，避免误触发收起。可以结合useRef判断点击/鼠标移出的目标是否在菜单范围内：

import { useState, useRef, useEffect } from 'react';

function NavigationBar() {
  const [showSubMenu, setShowSubMenu] = useState(false);
  const parentRef = useRef(null);
  const subMenuRef = useRef(null);

  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (parentRef.current && !parentRef.current.contains(e.target) && !subMenuRef.current?.contains(e.target)) {
        setShowSubMenu(false);
      }
    };
    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  return (
    <div ref={parentRef} onMouseEnter={() => setShowSubMenu(true)} onMouseLeave={() => setShowSubMenu(false)}>
      父菜单选项
      {showSubMenu && (
        <div ref={subMenuRef} className="nav-submenu">
          <a href="/page1">子菜单项1</a>
          <a href="/page2">子菜单项2</a>
        </div>
      )}
    </div>
  );
}

3. 确认子菜单层级 #

检查子菜单的z-index值，确保它没有被页面其他元素遮挡，导致鼠标无法实际点击到子菜单内容：

.nav-submenu {
  z-index: 999; /* 设置足够高的层级 */
}

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