我的CSS下拉菜單顯示在Internet Explorer和Firefox的錯誤位置

Question

一切在Chrome和Safari上都可以正常運行，但是當我嘗試使用IE和FF對其進行檢查時，子菜單菜單顯示在主導航的左側。 這是網站cedumilam.php.cs.dixie.edu。 這是我的CSS代碼：

#nav {
    margin: auto;
    z-index: 10;
    display: inline;
    text-transform: uppercase;
    text-align: center;
}

#nav ul {
width:570;
margin:0px auto 2px auto;
text-align:center;}

#nav ul li{display: inline;
position:relative;
z-index:99;

}  

#nav li:hover { position: relative }
#nav li:hover > a { 
  color: #845343; 
  text-decoration:underline;
}

#nav li.sub:hover > a {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;        
}

#nav li a {

  color: black;
  font-weight: bold;
  text-decoration: none;
  padding: 15px;
  display: inline;
}


#nav li ul { 
  background: #fff;
  margin-top: 5px;
  display: none;   
}

#nav li:hover ul {
  display:block; 
  position:absolute; 
}

#nav li ul {
  background: white;
  padding: 2px;      
}

#nav li ul li a, #nav li ul li a:hover {
  background: transparent;
  color: #000;
  width: 250px;
  font-size: 0.95em;
  font-weight: normal;
}

#nav li ul li a:hover { 
  color: #845343; 
  text-decoration: underline; 
}

Answer 1

要使其在Firefox中運行，請添加以下內容：

#nav li:hover ul {
    left: 0;
}

我認為Firefox（可能還有Internet Explorer）解釋了以下position: absolute; 不一樣。

抱歉-當前沒有Internet Explorer設置，因此我無法在此處進行測試...

這是一個小提琴： http : //jsfiddle.net/Niffler/AQ39n/