I have a basic navigation menu that includes a hover effect:
<nav id="menu">
<div><a href="#">Home</a></div>
<div>
<a href="#">1</a>
<nav>
<div><a href="#">1.1</a></div>
<div><a href="#">1.2</a></div>
<div><a href="#">1.3</a></div>
</nav>
</div>
</nav>
Here is the CSS used for this hover effect:
#menu > div > nav {
display: none;
position: absolute;
z-index: 9999;
}
#menu > div:hover > nav {
display: block;
}
However, the :hover state of the menu never goes away. Even after clicking elsewhere on the page, the hover effect persists. Is there a way to remove this without using JavaScript? (View the Fiddle)
It appears that the only way to eliminate the :hover state is by focusing on another element or hovering over something else.