当我将鼠标悬停在选项卡上时，下拉菜单不会保留，因此我无法导航它 - 反应应用程序

Question

我的导航组件有一个“游戏”选项卡，当您将鼠标悬停在它上面时，会出现一个下拉菜单。但是，当用户从游戏选项卡正下方悬停到菜单时，我不知道如何保持下拉菜单打开，因为有一个小间隙，因此菜单会在您从游戏选项卡移动到下拉菜单之前消失。

这是相关的jsx代码：

                    <li className='navbar__link' onMouseEnter={() => setIsDropdownOpen(true)} onMouseLeave={() => setIsDropdownOpen(false)}>
                      <Link to="/games" className='link__styles'>Games</Link>
                      <div className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`} onMouseEnter={() => setIsDropdownOpen(true)} onMouseLeave={() => setIsDropdownOpen(false)}>
                        <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>

以下是相关的CSS代码：

.dropdown-menu {
    position: absolute;
    top: 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);
}

.navbar__link:hover .dropdown-menu,
.dropdown-menu:hover {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.dropdown-column {
    max-width: 200px;
}

.dropdown-column > p {
    margin-top: 1rem;
}

.dropdown-tile {
    width: 25px;
    margin-right: 0.2rem;
}

.dropdown-tile2 {
    width: 17.5px;
    margin: 0 0.4rem 0 0.2rem;
}

Answer 1

您可以在关闭下拉菜单之前稍微延迟一下。