我有一个带有悬停状态的简单菜单:

<nav id="menu"><div><a href="#">首页</a></div>
<a href="#">1</a><导航><div><a href="#">1.1</a></div><div><a href="#">1.2</a></div><div><a href="#">1.3</a></div></导航></div></导航>

CSS:

#menu >div >导航{显示:无；位置:绝对；z指数:9999；}#菜单>div:悬停>导航{显示:块；}

但是 :hover 状态永远不会结束.再次点击(其他地方)后:悬停仍然存在.我可以在没有 javascript 的情况下解决这个问题吗?(小提琴)

似乎摆脱 :hover 的唯一方法是 :focus 某处 (element.focus()) 或将鼠标悬停在其他地方.

没有.在某些移动设备上，悬停状态会部分中断，因为您无法将鼠标悬停在元素上.您必须使用 javascript.

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.

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.