Dropdown menu, stay when hovered over menu

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 :expressionless: (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 ?

Usually you would use a nested list and when you hover the list parent you will show the nested UL (the dropdown) and in that way the list is always hovered while you navigate the nested element.

In your example your mouse code should go on the div that holds the anchor and the dropdown and not the button itself.

I have no idea why you would use JS instead of css hover (as in the menu you linked to) but the basis is the same.

Heres mostly your code but without the js or injected html so that you can see what structure you need to make this work. I also added the effect you mentioned.

As I said above I would use nested lists for a more semantic structure.

I would also advice against dynamically adding the dropdown content on request as that will make animation harder and makes the navigation pretty useless if js is disabled and of course makes it harder for the site to get indeed in search engines.