React应用中Dropdown Menu悬停切换时因间隙消失的问题求助

核心问题分析 #

你遇到的问题是两个原因叠加导致的：

1. 下拉菜单与父标签之间存在物理间隙，鼠标移过间隙时触发父元素的mouseleave事件
2. 同时混用了React状态控制和CSS hover规则，导致菜单显示逻辑冲突

方案一：纯CSS实现（最简单高效） #

直接用CSS hover控制菜单显示，无需JS状态，彻底避免事件冲突和间隙问题。

1. 给父元素添加相对定位
   确保下拉菜单的绝对定位是相对于navbar__link，而不是页面其他元素：

   .navbar__link {
     position: relative;
     /* 保留你原有的其他样式 */
   }
   

2. 消除下拉菜单与父元素的间隙
   修改.dropdown-menu的top值，让菜单紧贴父元素底部：

   .dropdown-menu {
     position: absolute;
     top: 100%; /* 替换原来的calc(100% -4px)，确保无缝衔接 */
     left: 0;
     width: 100%;
     background-color: white;
     display: none;
     z-index: 999;
     padding: 2% 8%;
     box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
     /* 如果还是有微小间隙，可加一行：margin-top: -1px; */
   }
   

3. 简化JSX代码
   去掉所有React鼠标事件和状态控制，只保留基础结构：

   <li className='navbar__link'>
     <Link to="/games" className='link__styles'>Games</Link>
     <div className="dropdown-menu">
       <span className="dropdown-column">
         <h3>Games</h3>
         <p>Word games, logic puzzles and crosswords, including an extensive archive.</p>
       </span>
       <span className="dropdown-column">
         <h5>Play</h5>
         <ul>
           <a href="link">
             <li>
               <img src={WordleIcon} alt="" className="dropdown-tile" />
               <span>Wordle</span>
             </li>
           </a>
           <a href="link">
             <li>
               <img src={CrosswordIcon} alt="" className='dropdown-tile2'/>
               <span>Crossword</span>
             </li>
           </a>
           <a href="link">
             <li>
               <img src={WordsearchIcon} alt="" className='dropdown-tile2'/>
               <span>Wordsearch</span>
             </li>
           </a>
         </ul>
       </span>
     </div>
   </li>
   

方案二：保留React状态控制（适合复杂交互场景） #

如果需要用JS实现更复杂的菜单逻辑，比如延迟关闭、点击外部关闭等，可以用以下方式修复：

1. 添加延迟关闭逻辑
   在组件中添加计时器，给鼠标移过间隙留缓冲时间：

   import { useState } from 'react';
   
   // 组件内部
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   let closeTimer;
   
   const handleMouseEnter = () => {
     clearTimeout(closeTimer);
     setIsDropdownOpen(true);
   };
   
   const handleMouseLeave = () => {
     closeTimer = setTimeout(() => {
       setIsDropdownOpen(false);
     }, 150); // 150ms延迟，足够鼠标移过间隙
   };
   

2. 调整CSS和JSX
   去掉CSS中的hover规则，完全用状态控制显示：

   .dropdown-menu {
     position: absolute;
     top: 100%; /* 消除间隙 */
     left: 0;
     width: 100%;
     background-color: white;
     display: none;
     z-index: 999;
     padding: 2% 8%;
     box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
   }
   
   .dropdown-menu.show {
     display: flex;
     gap: 2rem;
     justify-content: center;
   }
   

   绑定修改后的事件处理函数：

   <li className='navbar__link' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
     <Link to="/games" className='link__styles'>Games</Link>
     <div 
       className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`} 
       onMouseEnter={handleMouseEnter} 
       onMouseLeave={handleMouseLeave}
     >
       {/* 下拉菜单内容不变 */}
     </div>
   </li>
   

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