菜單CSS無法在IE11正常工作

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無法處理顯示：表（β細胞）的風格。嘗試用普通（inline-）塊樣式來顯示它：

#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%風格。