在IE中無法正確呈現CSS菜單

Question

我構建的菜單在所有其他瀏覽器（IE除外）中都能正常工作 - 這真是一個驚喜。

的jsfiddle菜單：http://jsfiddle.net/JazParkyn/6jshy/19/

不知道，小提琴將有助於雖然作爲即看菜單正常工作就在這裏，所以我猜它的東西與我的模板。我已經使用IE邊緣代碼，並使網站上的所有其他工作都能正常工作，是否有人有任何想法？

CSS：

nav ul ul { 
z-index:100; 
opacity: 0; 
visibility: hidden; 
transition: all .5s ease-in; 
-o-transition: all .5s ease-in; 
-ms-transition: all .5s ease-in; 
-moz-transition: all .5s ease-in; 
-webkit-transition: all .5s ease-in; 
} 
nav ul li:hover > ul { 
z-index:100; 
visibility: visible; 
opacity: 1; 
} 
nav ul { 
background: #355E95; 
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
padding: 0 20px; 
border-radius: 10px; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content:""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: #1881B4; 
} 
nav ul li:hover a { 
color: #fff; 
} 
nav ul li a { 
display: block; 
padding: 20px; 
color: #ffffff; 
text-decoration: none; 
} 
nav ul ul { 
background: #355E95; 
border-radius: 0px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
border-top: 1px solid #D5EEFF; 
border-bottom: 1px solid #D5EEFF; 
position: relative; 
} 
nav ul ul li a { 
padding: 15px 40px; 
color: #fff; 
} 
nav ul ul li a:hover { 
background: #1881B4; 
} 
nav ul ul ul { 
position: absolute; 
left: 100%; 
top:0; 
} 

任何建議，將不勝感激

這在IE10發生的事情，我已經被迫與即邊緣meta標籤的標準模式。 jsfiddle將在ie中正常工作，而不是實際的網頁。

編輯：我只是把下面的CSS中，現在可以神奇地運行

html { 
    -webkit-font-smoothing: antialiased; 
} 

不過，我還有的字體不是在Safari和Opera正確呈現的問題，我猜的東西與他們的渲染機器相關 - 字體看起來重量較重，有沒有人有過這種情況發生過？

Answer 1

嗯，小提琴在IE中工作。您的網頁上我想補充的

menu.css（51行）

#nav ul li { 
    /* leave the other properties here */ 
    position:relative; 
} 

和子菜單（56行）

#nav ul ul { 
    /* leave the other properties here */ 
    left:0; 
} 

也許你可以將屬性添加到分離器類（僅用於視覺反饋）：

.separator { 
    cursor: pointer; 
}