html - 下拉悬停在 IE9 中不保持打开状态

Question

我发誓我已经将这个简单的下拉菜单做了一百万次，但出于某种原因 IE9 doe snot 不想合作。如果您在 Chrome 中测试它，它会工作得很好，但转到 IE9，下拉菜单在悬停时不会保持打开状态。

起初我以为我是在添加伪类 :hover 到错误的元素，因为它看起来没有捕捉到 <li>。 ，但我不认为是这样。您会注意到在我的代码中我没有显示子菜单 ul，稍后我会告诉它，当它悬停时会显示其子菜单 ul。它确实如此，但它消失了:(

有趣的是，如果我调整子菜单的位置，它就会起作用!所以去想想吧!

1. 我是不是在错误的地方应用了伪类？
2. 如果是这样，为什么它在 chrome 中运行良好？
3. 位置调整与什么有什么关系？

附注我已经检查过这个 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 .但 parent <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/