:hover state doesn't end on iOS

Question

I have a simple menu with a hover state:

<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>

CSS:

#menu > div > nav {
    display: none;
    position: absolute;
    z-index: 9999;
}
#menu > div:hover > nav {
    display: block;
}

But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)

It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.

Answer 1

No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.

Answer 2

You can use the hover media query to disable hover states on iOS: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover