React+CSS下拉菜单闪烁后消失问题求助

问题原因 #

你给导航栏的li元素绑定了onMouseLeave事件，但下拉菜单通常是脱离li文档流的绝对定位元素，当鼠标从li移到下拉菜单时，实际已经离开了li的触发范围，导致菜单被关闭。

解决办法 #

方法1：调整事件绑定的容器范围 #

把鼠标进入/离开事件绑定到包含导航标签和下拉菜单的父容器上，而不是只绑定在li上。这样鼠标在标签和下拉菜单之间移动时，不会触发离开事件。

示例代码修改：

// Navbar2.jsx
<div className="nav-item-container" onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)}>
  <li>
    <a>Work</a>
  </li>
  {isOpen && (
    <div className="dropdown-menu">
      <a href="#">社交媒体</a>
      <a href="#">照片</a>
      <a href="#">视频</a>
    </div>
  )}
</div>

同时给容器加基础CSS确保范围覆盖：

.nav-item-container {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* 其他样式 */
}

方法2：添加延迟关闭逻辑 #

通过定时器延迟菜单关闭，给鼠标从导航标签移到下拉菜单的缓冲时间，同时在下拉菜单上绑定事件清除定时器。

示例代码修改：

// Navbar2.jsx
import { useState, useRef } from 'react';

const Navbar2 = () => {
  const [isOpen, setIsOpen] = useState(false);
  const closeTimer = useRef(null);

  const handleMouseEnter = () => {
    clearTimeout(closeTimer.current);
    setIsOpen(true);
  };

  const handleNavMouseLeave = () => {
    closeTimer.current = setTimeout(() => setIsOpen(false), 200);
  };

  const handleDropdownMouseEnter = () => {
    clearTimeout(closeTimer.current);
  };

  const handleDropdownMouseLeave = () => {
    setIsOpen(false);
  };

  return (
    <nav>
      <ul>
        <li onMouseEnter={handleMouseEnter} onMouseLeave={handleNavMouseLeave}>
          <a>Work</a>
          {isOpen && (
            <div 
              className="dropdown-menu"
              onMouseEnter={handleDropdownMouseEnter}
              onMouseLeave={handleDropdownMouseLeave}
            >
              <a href="#">社交媒体</a>
              <a href="#">照片</a>
              <a href="#">视频</a>
            </div>
          )}
        </li>
      </ul>
    </nav>
  );
};

这两种方法都能解决你遇到的问题：既保证鼠标移到下拉菜单时菜单不消失，又能在鼠标完全离开导航项区域时自动收起菜单。

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