: hover state does not end on iOS

Question

I have a simple menu with a hang 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 state: hover never ends. After another click (somewhere else): the hang remains. Can I get around this without javascript? ( Fiddle )

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

Answer 1

No. Custom states are partially broken into some mobile devices simply because you cannot hang an item. You will need to use javascript.