css - 悬停菜单在 IE10、9 中不持久

Question

我为一个 joomla 网站创建了一个非常基本的悬停 css 菜单(如果可以避免，我真的不想使用 jQuery)。它在除 IE (10,9...) 之外的所有应用中都运行良好。

当您将鼠标悬停在顶层并将鼠标悬停在子菜单上时，子菜单会保留在除 IE 之外的所有内容中。

如何让IE玩球？0

这是 html:

    <ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
    <ul>
        <li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
        <li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
        <li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
        <li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
    </ul>
</li><li class="item-220 deeper parent"> etc ....

这是CSS

ul#mainMenu li {
    position:relative;
}

ul#mainMenu ul {
    position:absolute;
    width:150px;
    top:17px;
    left:-9999px;
    text-align:left;
    background-color:#000;
    z-index:5;

}

ul#mainMenu ul li {
    display:block;
    border-top:1px solid #999;
}

ul#mainMenu ul li:first-child {
    border-top:none;
}

ul#mainMenu ul li a {
    font-size:14px;
    line-height:2em;
    color:pink;
}

ul#mainMenu li:hover ul {
    left:0px;
}

Answer 1

您应该将边距和填充设置为零。 IE对此有默认值。

'ul#mainMenu ul {填充:0; margin :0；}'