I want the dropdown to disappear temporarily after I make a selection, but still be available for me to hover over later.
This is my current code:
<div class="navbutton_container">
<button onclick="someFunction()"><p>Title</p></button>
<div class="nav_dropdown">
<button onclick="someFunction()"><p>Content1</p></button>
<button onclick="someFunction()"><p>Content2</p></button>
<button onclick="someFunction()"><p>Content3</p></button>
<button onclick="someFunction()"><p>Content4</p></button>
</div>
</div>
.navbutton_container > .nav_dropdown {
display: none;
opacity: 0;
}
.navbutton_container:hover > .nav_dropdown {
display: block;
opacity: 1;
position: absolute;
}
Once a button is selected, I would like the dropdown to disappear temporarily so it's not in the way until they stop hovering over it. Then, when they hover back on it, the :hover property should work again.
If you have suggestions for a better structure, I'm completely open to making changes!