Question

快速注意：我实际上无法查看给出的答案是否可以帮助我，直到下周一不幸

我有一个带有一些子菜单的菜单（2级深度）并且所有CSS都在Chrome中运行，但它在IE11中无法正常显示。甚至更奇怪的是，当从本地测试服务器查看时，相同的菜单完全搞砸了，并且在远程服务器上查看时工作（几乎）正常。问题出在子菜单上。当悬停在顶层时，子菜单应显示在顶层下方，但在IE中它显示在顶层。您可以在http://dev.votob.nl查看示例（在Chrome / Firefox中查看所需结果）。

如何修复IE11中的定位？

JSFiddle Demo

HTML：

<div class="menu-main-container">
    <ul id="menu-main" class="menu">
        <li id="menu-item-1"> <a href=#>Item1</a>

        </li>
        <li id="menu-item-2"> <a href=#>Item2</a>

            <ul class="sub-menu">
                <li id="menu-item-5"> <a href="#">Sub Item 1</a>

                </li>
                <li id="menu-item-6"> <a href="#">Sub Item 2</a>

                </li>
                <li id="menu-item-7"> <a href="#">Sub Item 3</a>

                    <ul class="sub-menu">
                        <li id="menu-item-8"> <a href="#">Sub Sub Item 1</a>

                        </li>
                        <li id="menu-item-9"> <a href="#">Sub Sub Item 2</a>

                        </li>
                        <li id="menu-item-10"> <a href="#">Sub Sub Item 3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="menu-item-3"> <a href=#>Item3</a>

        </li>
        <li id="menu-item-4"> <a href=#>Item4</a>

        </li>
    </ul>
</div>

CSS

/*top level*/
 .menu-main-container > ul {
    text-align : left;
    display : table;
    list-style : none;
    text-transform : capitalize;
    text-decoration : none;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
}
.menu-main-container ul > li {
    text-align : left;
}
.menu-main-container > ul > li {
    width: auto;
    display : table-cell;
    position : relative;
    cursor : pointer;
    vertical-align : middle;
    text-align : center;
}
.menu-main-container ul li a {
    text-transform : capitalize;
    text-decoration : none;
    color : #000000;
    font-weight : bold;
    font-size : 16px;
}
/*sub menu level 1*/
 .menu-main-container > ul > li:hover {
    background-color : #003cb3;
}
.menu-main-container > ul > li:hover > a {
    color : #fff;
}
.menu-main-container > ul > li > ul {
    position : absolute;
    top : 100%;
    width : 565px;
    display : none;
    opacity : 0;
    visibility : hidden;
    background-color : #FFFFFF;
    padding : 25px 25px 0px 25px;
}
.menu-main-container > ul > li > ul > li {
    display : block;
    color : #000000;
    width : 50%;
    list-style-type : none;
    margin-bottom: 25px;
}
.menu-main-container > ul > li > ul > li > a {
}
.menu-main-container > ul > li > ul > li:hover > a {
    color : #003399;
}
.menu-main-container > ul > li:hover > ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
/*sub menu positionering*/
 .menu-item-256 > ul.sub-menu {
    left : -299px;
}
/*sub menu level 2*/
 .menu-main-container > ul > li:hover > ul > li > ul {
    padding : 25px 25px 0px 25px;
    ;
    position : absolute;
    top : 0;
    width : 42%;
    left : 50%;
    margin-left: 0;
    display : none;
    opacity : 0;
    visibility : hidden;
}
.menu-main-container > ul > li > ul > li > ul > li {
    list-style-type : none;
}
.menu-main-container > ul > li:hover > ul > li > ul > li {
    border : none;
    margin-bottom: 25px;
    margin-right : 0;
}
.menu-main-container > ul > li:hover > ul > li:hover > ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
.menu-main-container > ul > li:hover > ul > li > ul > li > a {
    color : #000000;
}
.menu-main-container > ul > li:hover > ul > li > ul > li:hover > a {
    color : #003399;
}

Answer 1

也许IE无法处理显示：table（-cell）样式。尝试使用普通（内联）块样式显示它：

＆＃13;

#menu {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
    position: relative;
}
#menu * {
    font-size: 16px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu a {
    text-transform: capitalize;
    text-decoration: none;
    color: #000;
    display: block;
}
#menu > li {
    display: inline-block;
    width: 20%;
    text-align: center;
}
#menu > li ul {
    text-align: left;
}
#menu > li:hover {
    background: #003cb3;
}
#menu > li:hover > a {
    color: #fff;
}
#menu > li > ul {
    background: #fff;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 25px 25px 0 25px;
}
#menu > li:hover > ul {
    display: block;
}
#menu > li > ul > li {
    margin-bottom: 25px;
    width: 50%;
}
#menu ul li:hover > a {
    color: #039;
}
#menu > li > ul > li > ul {
    display: none;
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    padding: 25px 25px 0 25px;
}
#menu > li > ul > li:hover > ul {
    display: block;
}
#menu > li > ul > li > ul > li {
    margin-bottom: 25px;
    width: 100%;
}

＆＃13;

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a>
        <ul>
            <li><a href="#">sub item 1</a></li>
            <li><a href="#">sub item 2</a></li>
            <li><a href="#">sub item 3</a>
                <ul>
                    <li><a href="#">sub sub item 1</a></li>
                    <li><a href="#">sub sub item 2</a></li>
                    <li><a href="#">sub sub item 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">login</a></li>
</ul>
<p>Next element</p>

＆＃13;

Answer 2

将position : relative从.menu-main-container > ul > li移至.menu-main-container > ul。

然后您可以删除top : 100%样式。

菜单CSS在IE11中无法正常工作

2 个答案: