My navigation component includes a Games tab with a dropdown menu that appears when you hover over it. However, I'm facing an issue where the dropdown menu closes before the user can transition from hovering over the games tab to the actual dropdown menu due to a small gap in between.
Check out the JSX code snippet below:
<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;
}