菜單CSS在IE11中無法正常工作

Question

快速注意：我實際上無法查看給出的答案是否可以幫助我，直到下周一不幸

我有一個帶有一些子菜單（2級深度）的菜單，並且所有CSS都在Chrome中運行，但它在IE11中無法正常顯示。 甚至更奇怪的是，當從本地測試服務器查看時，相同的菜單完全搞砸了，並且在遠程服務器上查看時工作（幾乎）正常。 問題出在子菜單上。 當懸停在頂層時，子菜單應顯示在頂層下方，但在IE中它顯示在頂層。 您可以在http://dev.votob.nl上查看示例（在Chrome / Firefox中查看所需結果）。

我如何修復IE11中的定位？

JSFiddle演示

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）樣式。 嘗試使用普通（內聯）塊樣式顯示它：

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

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

Answer 2

移動position : relative .menu-main-container > ul > li到.menu-main-container > ul 。

然后你可以刪除top : 100%樣式。