IE：悬停时显示 ul>li>ul

Question

我很难让这个网站的导航在 IE 中正常工作： http://test3.grysom.cz

预期的行为是在将鼠标悬停在 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;
}

它适用于大多数当前浏览器，但不适用于旧浏览器。而且由于我几乎是业余爱好者，所以我真的想不出任何理由。

大家有什么建议吗？

提前感谢您的帮助。

Answer 1

浏览器忽略包含无效选择器的规则集。对于 IE，由于 :focus-within，nav.main:focus-within ul>li>ul 是一个无效的选择器。因此，只需拆分您的两个规则：

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

IE：悬停时显示 ul>li>ul

IE: Show ul>li>ul on hover

css

internet-explorer

nav