React中实现悬停登录元素及下拉菜单时保持菜单显示

你的事件绑定逻辑本身没有错误，菜单提前关闭的核心原因有两个：

• 下拉菜单.account_dropdown用了position: absolute，脱离正常文档流，不会撑开父元素.create_account的高度
• 你给下拉菜单设置了top: 40px，而.create_account本身的高度只有内部<p>标签的高度（约20px），导致下拉菜单和父元素的可悬停区域之间出现了断层

鼠标从触发文字向下移动时，只要离开父元素的实际盒模型范围，就会立刻触发onMouseLeave把菜单隐藏，根本等不到鼠标移到下拉菜单上。

方案1：纯CSS修复（优先使用，无额外JS逻辑） #

直接消除触发元素和下拉菜单之间的悬停断层，让下拉菜单属于.create_account的连续悬停区域，鼠标移动全程不会离开父元素，就不会触发提前关闭。
修改.account_dropdown的样式，让菜单和父元素底部无缝衔接，同时加透明缓冲区域避免视觉上的缝隙导致断触：

.account_dropdown {
  /* 替换原有top/right值，让菜单顶部贴着父元素底部 */
  top: 100%;
  right: 0;
  /* 加透明上内边距做悬停缓冲，覆盖小三角和菜单之间的视觉空隙 */
  padding-top: 15px;
  /* 以下原有样式保持不变 */
  width: 250px;
  height: 400px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  border-radius: 5px;
  font-size: 14px;
  position: absolute;
}
.account_dropdown::before {
  /* 对应调整小三角位置，匹配缓冲区域 */
  top: 8px;
  right: 20px;
  /* 以下原有样式保持不变 */
  content: '';
  width: 15px;
  height: 15px;
  background-color: #fff;
  box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 40%);
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
}

改完后鼠标从触发文字移到菜单的全程都在父元素的悬停范围内，onMouseLeave只有真的把鼠标移到整个区块外面才会触发，菜单不会提前关闭。

方案2：JS延迟关闭（适合必须留视觉间隙的场景） #

如果设计要求触发元素和下拉菜单之间必须留白，就给关闭动作加短延迟，鼠标移到下拉菜单上时清除关闭定时器即可。
修改Header组件逻辑：

import React, { useState, useRef } from "react";
import classes from "./Header.module.css";
import SignInMenu from "../signin/SignInMenu";

const Header = () => {
  const [signMenu, setSignMenu] = useState(false);
  // 存储关闭定时器的引用
  const closeTimer = useRef(null);

  // 鼠标进入区域：清除关闭定时器，打开菜单
  const handleMouseEnter = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setSignMenu(true);
  };

  // 鼠标离开区域：延迟150ms再关闭，给用户留移动到下拉菜单的时间
  const handleMouseLeave = () => {
    closeTimer.current = setTimeout(() => {
      setSignMenu(false);
    }, 150);
  };

  return (
    <header className={classes.header}>
      <div className={classes.container}>
        <div className={classes.header_options}>
          <div
            className={classes.create_account}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <p>
              <span>Sign In</span>
              <span>Join Free</span>
            </p>
            {signMenu ? <SignInMenu/> : null}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

这个方案的逻辑是：鼠标离开触发区时不会立刻关闭菜单，等150毫秒再执行关闭；如果这150毫秒内鼠标移到下拉菜单上（下拉菜单是.create_account的子元素，会触发父元素的mouseenter事件），就会直接清掉关闭定时器，菜单保持打开；只有鼠标真的离开整个区块超过150毫秒，才会关闭菜单。

• 你的代码里下拉菜单是直接渲染在.create_account元素内部的，只要悬停区域连续，原生的onMouseEnter/onMouseLeave事件完全可以满足需求，不需要引入额外第三方库
• 不要把下拉菜单移到.create_account元素外面渲染，否则父元素的鼠标事件捕获不到下拉菜单区域，需要写更复杂的坐标判断逻辑才能实现悬停保持效果。

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