Css – Dropdown Menu doesnt stay when I hover over the tab so I cant navigate it – react app

My nav component has a Games tab where a dropdown menu appears when you hover over it. However, I can’t figure out how to keep the dropdown menu open as the user hovers from the games tab just below to the menu as there’s a small gap so the menu disappears before u can move from the games tab to the dropdown menu.

Here is the relevant jsx code:

                    <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>

Here is the relevant css code:

.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;
}