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 {padding：0; margin：0;}'

Answer 2

确保元素之间没有可能导致问题的边距。 IE开发工具将有助于此。

另外，尝试使用1px透明gif或png作为孩子LI的背景 - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2

希望有所帮助

悬停菜单在IE10中不持久，9

2 个答案: