下拉懸停不停留在IE9中打開

Question

我發誓我已經做了一些簡單的下拉一百萬次，但由於某種原因IE9母鹿想要合作。如果你在Chrome中測試它，它會工作得很好，但是去IE9和下拉不能保持懸停狀態。

起初我以爲我在添加僞類：將鼠標懸停在錯誤的元素上，因爲它看起來好像沒有抓住<li>，但我不認爲就是這樣。你會注意到在我的代碼中，我的子菜單ul沒有顯示，我稍後告訴它，當它被展開時顯示它的子菜單ul。而它，但它消失:(

時髦的事情是，如果我調整子菜單的位置，它的工作！所以大家！

1. 我是否應用僞類錯地點？
2. 如果是這樣，爲什麼它在Chrome中工作正常？
3. 又是什麼位置的調整有什麼關係呢？

PS我已經籤這個CSS dropdown menu won't stay visible when you hover over the menu itself出來，它給了我一個良好的方向發展，但並沒有解決我的問題，線程是有點死

HTML

<div class="blue-bar"> 
<div class="homepage-menu right"> 
    <ul> 
     <li>PA STATE AGENCIES <span class="whitecaret"></span> 
      <ul class="homepage-submenu" > 
       <a href="#"><li>Education</li></a> 
       <a href="#"><li>Environmental Protection</li></a> 
       <a href="#"><li>Game Commission</li></a> 
       <a href="#"><li>Homeland Security</li></a> 
       <a href="#"><li>Labor & Industry</li></a> 
       <a href="#"><li>Lottery</li></a> 
       <a href="#"><li>Public Welfare</li></a> 
       <a href="#"><li>Revenue</li></a> 
       <a href="#"><li>State</li></a> 
       <a href="#"><li>Transportation</li></a> 
       <a href="#"><li>More Agencies...</li></a> 
      </ul> 
     </li> 
     <li>PA ONLINE SERVICES <span class="whitecaret"></span> 

      <ul class="homepage-submenu"> 
       <a href="#"><li>COMPASS: Access to Health and Human Services</li></a> 
       <a href="#"><li>Driver & Vehicle Services</li></a> 
       <a href="#"><li>Find a Job</li></a> 
       <a href="#"><li>Fishing Licenses</li></a> 
       <a href="#"><li>Homeleand Security Tip Submission</li></a> 
       <a href="#"><li>Hunting Licenses</li></a> 
       <a href="#"><li>Personal Income Taxes</li></a> 
       <a href="#"><li>Places to Stay in PA</li></a> 
       <a href="#"><li>Turnpike E-Z Pass</li></a> 
       <a href="#"><li>Unemployment Compensation</li></a> 
       <a href="#"><li>More Services...</li></a> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS

/*Home Page */ 

.blue-bar { 
    background-color: #2a5192; 
    height: 25px; 
    margin-top: 0; 
} 
.homepage-menu{ 
z-index: 2; 
height: 25px; 
} 
.homepage-menu ul { 
text-align: left; 
margin: 0; 
display:inline; 
padding: 10px 0px; 
list-style: none; 
font-family: "open_sanssemibold"; 
color: white; 
} 
.homepage-menu ul li { 
display: inline-block; 
position: relative; 
padding: 2px 20px; 
cursor: pointer; 
-webkit-transition: all 0.2s; 
-moz-transition: all 0.2s; 
-ms-transition: all 0.2s; 
-o-transition: all 0.2s; 
transition: all 0.2s; 
} 
.homepage-menu ul li:hover { 
    color: #e6a61c; 
} 
.homepage-menu .whitecaret { 
border-top: 6px solid white; 
} 
.homepage-menu ul li ul li { 
background-color: #2a5192; 
color: white; 
text-shadow: 0 -1px 0 #000; 
margin: 0px 0px; 
padding: 2px 10px; 
width: 100%; 
} 
.homepage-menu ul li ul li:first-child { 
padding-top: 15px; 
} 
.homepage-menu ul li ul li:hover { 
background: #666; 
} 
ul.homepage-submenu{ 
padding: 0; 
position: absolute; 
top: 25px; /* change this to top: 15px;*/ 
left: 11px; 
width: 200px; 
    display:none; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
-webkit-transiton: opacity 0.2s; 
-moz-transition: opacity 0.2s; 
-ms-transition: opacity 0.2s; 
-o-transition: opacity 0.2s; 
-transition: opacity 0.2s; 
z-index: 1; 
} 
.homepage-menu > ul > li:hover ul{ 
display: block; 
background-color: #2a5192; 
color: white; 
} 
.whitecaret { 
float: right; 
position: relative; 
top: -13px; 
left: 10px; 
    border-top: 8px solid white; 
border-right: 8px solid transparent; 
border-left: 8px solid transparent; 
} 

，也是一個FIDDLE

Answer 1

你的主要問題是絕對定位的子菜單有top: 25px。但是父母<li>在IE和Firefox中實際上只有24px的總高度（使用Firebug/IE控制檯進行檢查）。如果您的速度不夠快，那麼1px的間隔會導致子菜單在您懸停之前關閉，因爲該間隙「屬於」相對父代<li>或絕對<ul>。

只需在子菜單上使用top: 100%即可解決該問題。主<ul>也不應該是display: inline。的jsfiddle：http://jsfiddle.net/FB2Fb/9/

爲了獲得白色的尖上工作跨瀏覽器的使用position: absolute：

.whitecaret { 
    position: absolute; 
    top: 10px; 
    right: 0; 
    border-top: 8px solid white; 
    border-right: 8px solid transparent; 
    border-left: 8px solid transparent; 
} 

搞掂的jsfiddle：http://jsfiddle.net/FB2Fb/10/