I want to make dropdown menu, but it only works on hover, once I remove mouse from button it hides. BUT, when I get into that menu that it opened, I need it to keep that menu open. So I can get into sections, click on buttons etc…
What make my implementation different is that I use variable to show/hide dropdown menu, not sure how to make it different (my first time making this, trying to learn)
<div>
<a id="sports-link" href="#sports" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>Sports</a>
{isDropdownVisible &&
<SportsDropDownMenu scrolled={scrolled} isDropdownVisible={isDropdownVisible} setDropdownVisible={setDropdownVisible} />
}
</div>
<a href="#beliefs">Our beliefs</a>
<a href="#economics">Economics</a>
<a href="#FAQ">FAQ</a>
<a href="#news">News</a>
<a href="#join">Join now</a>
</div>
And then in SportsDropDownMenu.jsx
const SportsDropDownMenu = ({ scrolled }) => {
return (
<>
<div className={`sports-dropdown-menu ${scrolled ? 'scrolled' : ''} p-4`} >
<div>
<p className=" text-red_first font-semibold text-base">Our sports</p>
</div>
</div>
</>
)
}
.sports-dropdown-menu {
position: absolute;
top: 8.4rem;
color: black;
background-color: #F7FAFA;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
margin-left: 10px;
}
.sports-dropdown-menu.scrolled {
position: absolute;
top: 4.5rem;
color: black;
background-color: #F7FAFA;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
- And one more thing. Will I be able to apply transition effect when dropdown is being shown ?