如果孩子在焦点中（已被点击），我怎么能失去父母的悬停状态？我有一个菜单箭头（用OPEN代替了它，以减少代码），它在悬停状态下打开我的菜单和菜单项，当我单击它们时，菜单项就会聚焦。在菜单项点击后，我希望能够失去对我父母的关注，这样菜单就会消失。
如果可能的话，我会尽量避免使用javascript，这是我最好的尝试...
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}
这是我的html
null
.open-submenu:hover .submenu {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</body>
</html>null
编辑
我在一个单页应用程序上使用AngularJS框架，在我的例子中，点击锚点不会像标准html那样重新加载页面。
null
.submenu:hover ul li:active,
.submenu:hover ul li:active ~ li {
display: none;
}
如果click事件将在锚点的click事件之前，则解决方案是:not(:focus-winn)。因此,click事件永远不会被调度,您的菜单也无法工作。恐怕，如果那样的话，你不能没有JS。
null
.open-submenu:hover .submenu:not(:focus-within) {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</body>
</html>