純CSS下拉菜單不會在Firefox和IE

Question

的工作，我希望它像這樣的形象（在谷歌Chrome，Opera和Safari瀏覽器工作原理是這樣）：

然而，在Firefox和IE瀏覽器的最新版本，它看起來像這樣：

HTML：

<div id="navbar"> 
    <ul> 
     <li class="selected"> 
      <a href="index.html">HOME</a> 
     </li> 
     <li> 
      <a href="#">OUR FACILITIES</a> 
     </li> 
     <li> 
      <a href="#">ABOUT US</a> 
      <ul> 
       <li> 
        <a href="#">MEET THE STAFF</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">CONTACT US</a> 
      <ul> 
       <li> 
        <a href="#">RESERVATIONS</a> 
       </li> 
       <li> 
        <a href="#">DIRECTIONS</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

#navbar { 
    margin-top: 87px; 
} 
#navbar ul { 
    list-style: none; 
    background-color: transparent; 
} 
#navbar ul li { 
    font-family: magic; 
    font-size: 1.6em; 
    background-color: #85CE85; 
    display: inline-block; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    padding-left: 45px; 
    padding-right: 45px; 
} 
#navbar .selected { 
    background-color: #CCFFCC; 
} 
#navbar ul li ul { 
    display: none; 
    background-color: transparent; 
    width: 245px; 
    height: 130px; 
    margin-top: 20px; 
    margin-left: -85px; 
    font-family: SkyHaven; 
    font-size: .7em; 
} 
#navbar ul li:hover > ul { 
    display: inline-block; 
    position: fixed; 
} 
#navbar ul li ul li { 
    width: 175px; 
    border-top: 1px black dashed; 
    background-color: #85CE85; 
} 
#navbar ul li ul li:hover { 
    background-color: #6699FF; 
} 
#navbar ul li a { 
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
} 
#navbar a:hover { 
    color: white; 
    transition: .2s; 
} 
#navbar li:hover { 
    background-color: #CC0000; 
    transition: .8s; 
} 

感謝您的幫助！

Answer 1

這是新的代碼，它會爲你工作，沒有任何問題：

http://codepen.io/anon/pen/KpxaG/

如剛纔和建議嘗試使用html5shiv，避免IE的問題：

html5shiv

Answer 2

改變了這個：

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

似乎在Firefox中爲我工作。它如何尋找你？ Fiddle

Answer 3

這是你在找什麼？

http://jsfiddle.net/j22cG/

你需要定位的子菜單，如下所示：

position:absolute; 
top:100%; 
left:0; 

和您的父母立不敗之地相對。