Css IE：显示ul>；李>；悬停

我很难在IE中使用此网站的导航：

预期的行为是在将鼠标悬停在

nav

元素上时显示整个导航

即使我将代码简化为以下内容，它也不起作用：

ul#main-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
}


nav.main ul>li>ul {
    visibility: hidden;
    min-height: 1px;
}

nav.main:hover ul>li>ul, nav.main:focus-within ul>li>ul {
    overflow: visible;
    visibility: visible;
    max-height: 999px;
}

它适用于大多数当前浏览器，但不适用于较旧的浏览器。由于我是个业余爱好者，我真的想不出什么原因

你们有什么建议吗

---

事先谢谢你的帮助

浏览器忽略包含无效选择器的规则集。对于IE，

nav.main:ul>li>ul

中的焦点是无效的选择器，因为

：focus in

。因此，只需将两条规则分开：

nav.main:hover ul>li>ul {
    overflow: visible;
    visibility: visible;
    max-height: 999px;
}
nav.main:focus-within ul>li>ul {
    overflow: visible;
    visibility: visible;
    max-height: 999px;
}

---

如果您依赖于：focus-in，那么浏览器对它的支持并不多，我意识到使用它并不是最佳选择。另一方面，：hover是我在这里依赖的核心功能添加了focus in，只是为了增强不能使用游标的人的可访问性。有更好的解决办法吗？啊，正是我怀疑自己遗漏的细节。非常感谢你！你救了我，使我免于沮丧地把头撞到笔记本电脑上。