Question

我发誓我已经做了一百万次这个简单的下拉菜单，但由于某种原因IE9 doe snot想要合作。如果你在Chrome中进行测试，它可以正常工作，但是转到IE9并且下拉菜单在悬停时不会保持打开状态。

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

时髦的是，如果我调整子菜单的位置，它会起作用！那就去吧！

我是否在错误的地方使用了伪类？
如果是这样，为什么它在chrome中工作得很好？
位置调整与任何事情有什么关系？

P.S。我已经检查了这个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。但是在IE和Firefox中，父<li>实际上只有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/

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

1 个答案: