Question

我基本上是从头开始构建以下网站，并且该网站在大多数浏览器（Chrome，Firefox，Safari，Edge）上均能完美运行，但毫不奇怪，它不在IE上（经过9,10,11测试）：Alliance Française du Manitoba / p>

问题出在下拉菜单上。将鼠标悬停在菜单头之一（<div class="headerMenuItem">）上时，应该会出现一个大型菜单（<div class="headerMenuDropdown">）。当前，当悬停时，headerMenuItem像预期的那样突出显示，但是子headerMenuDropdown没有出现。

/***Header Menu***/

#headerMenu { /*Menu Wrapper*/
    float: left;
    margin: 12px auto 0px;
    padding: 0px;
}

.headerMenuItem { /* Individual menu item */
    display: block;
    float: left;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
    margin-top: 6px;
    padding-bottom: 10px;
}

.headerMenuItem:hover {
    background-color: #d4d9db;
    text-decoration: none;
}

.headerMenuItem>a {
    padding: 8px 12px 0px;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    color: #444;
}

.headerMenuItem a:hover { /* override default link behaviour */
    text-decoration: none;
    color: #444;
}

/*Menu expand*/

.headerMenuDropdown { /* mega-menu wrapper */
    float: left;
    display: none;
    position: fixed;
    background-color: white;
    width: 100%;
    left: 0;
    top: 100%;
    border-top: 1px solid #da002e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 105;
    text-align: center;
}

.headerMenuItem:hover .headerMenuDropdown { /*Display dropdown*/
    display: block;
    animation: headerDropdownAppear;
    animation-duration: 0.4s;
}

@keyframes headerDropdownAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Create up to 6 equal columns that floats next to each other */

.row {
    width: 1200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.column {
    float: left;
    width: 15.53848%;
    padding: 10px 10px 10px 0px;
}

.column span,
.column a {
    float: none;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 1px;
}

.column>span {
    font-weight: bold;
}

.column>span>span {
    padding-left: 15px;
    text-indent: -10px;
    font-weight: lighter;
    font-size: 0.8em;
}

.column>span>span>a {
    padding-left: 15px;
    margin-left: -15px;
    padding-bottom: 3px;
    line-height: 120%;
}

.column a:hover {
    background-color: #d4d9db;
}

<div id="headerBottom">
    <nav id="headerMenu">
        <div class="headerMenuItem">
            <a href="#">Learn French</a>
            <div class="headerMenuDropdown">
                <div class="row">
                    <div class="column">
                        <span>
                            <a href="columnLink1">Column 1</a>
                            <span>
                                <a href="link1">Link 1</a>
                            </span>
                            <span>
                                <a href="link2">Link 2</a>
                            </span>
                            ...
                        </span>
                    </div>
                    <div class="column">
                        <span>
                            <a href="columnLink2">Column 2</a>
                            ...
                        </span>
                    </div>
                    ...
                </div>
            </div>
        </div>
        <div class="headerMenuItem">
            <a href="#">Tests &amp; Exams</a>
            <div class="headerMenuDropdown">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
        ...
    </nav>
    ...
</div>

我认为这与两个已知的IE错误之一有关：

:hover不一致
不受支持的>选择器

但是，这两个问题都应该已被IE 9逐步淘汰，但我在IE 11上却遇到了问题！我有一个合适的<!DOCTYPE html>，HTML5Shiv，甚至还有crossover.htc，但似乎没有任何作用。

这使我认为问题出在CSS选择器上
.headerMenuItem:hover .headerMenuDropdown
编辑：但是，IE Inspector显示它是正确的！

任何已知的解决方法？

子元素：Internet Explorer上的鼠标悬停不起作用（HTML / CSS）

0 个答案: