React导航栏Dropdown组件悬停不显示问题求助

1. 调整父元素定位与Dropdown位置 #

给导航项添加相对定位，让Dropdown的绝对定位基于父li，避免位置偏移导致看不见：

/* 在nav-bar.css中添加 */
.nav-item {
  position: relative;
}

修改dropdown.css的位置与样式，确保菜单可见：

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 100%; /* 对齐父元素底部 */
  left: 0;
  list-style: none;
  text-align: start;
  background: #292828; /* 直接给菜单加背景，避免透明 */
  z-index: 1000; /* 确保在其他元素上层 */
  margin: 0;
  padding: 0;
}

2. 修复鼠标离开事件的触发逻辑 #

当鼠标移到Dropdown上时，会触发父li的onMouseLeave，导致下拉菜单消失。可以修改事件判断逻辑，确保只有鼠标真的离开整个导航区域才关闭菜单：

// 修改NavBar中的onMouseLeave函数
const onMouseLeave = (e) => {
  const relatedTarget = e.relatedTarget;
  // 检查鼠标是否还在当前导航项或下拉菜单范围内
  if (!relatedTarget || !e.currentTarget.contains(relatedTarget)) {
    setDropdown(false);
  }
};

3. 暂时移除Dropdown的点击状态干扰 #

先确保悬停功能正常，再整合移动端点击逻辑，简化Dropdown组件：

function Dropdown() {
  // 暂时注释点击状态，优先测试悬停显示
  // const [click, setClick] = useState(false);
  // const handleClick = () => setClick(!click);

  return(
    <>
      <ul className='dropdown-menu'>
          {MenuItems.map((item, index) => {
            return(
              <li key={index}>
                <Link className={item.cName} to={item.path}>
                  {item.title}
                </Link>
              </li>
            )
          })}
      </ul>
    </>
  );
}

4. 验证状态是否真的更新 #

可以在NavBar组件中添加调试输出，确认dropdown状态是否正确变更：

// 在NavBar的return语句前添加
console.log("当前dropdown状态:", dropdown);

如果状态确实更新了，那问题肯定出在CSS上；如果状态没更新，检查是否有其他逻辑意外修改了状态值。

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