Question

我知道有很多关于这方面的问题我已经通过他们而答案并没有解决我的问题。

我已经制作了一个CSS下拉菜单，它适用于chrome和firefox。但是当我在IE中检查它时，下拉菜单消失了。当您将鼠标悬停在顶部菜单上时会出现下拉菜单，然后只要您尝试将光标向下移动到下拉菜单，它就会消失。

我无法向您展示该网站，因为它尚未生效，但这里是HTML和CSS。

#nav{
         margin-top:15px;
         z-index: 100;
}

#nav ul{
        margin:0;
        padding:0;
        list-style: none;
        font-family: Arial, Verdana;
        z-index: 100;
}

#nav ul li{
        display:block;
        margin-right:10px;
        float:left;
        position: relative;
        z-index: 100;
}

#nav li.end{
        margin-right:0px;
}

#nav li ul { 
        display: none;
}

#nav ul li a {
        display: block;
        text-decoration: none;
white-space: nowrap;
padding:0;
margin:0;
}

ul li a:hover { 
        background-color: #814b97; 
}

#nav li:hover ul {
display: block;
position: absolute;
}

#nav li:hover li {
float: none;
font-size: 11px;
}

#nav img{
        border:none;
}

li:hover a { 
        background: #617F8A; 
}

li:hover li a:hover { 
        background: #95A9B1; 
}

和HTML

<div id="nav">
    <ul>
        <li><a href="#.asp"><img src="images/nav-home.jpg"></a></li>
        <li><a href="#.asp"><img src="images/nav-products.jpg"></a>
            <ul>
                <li><a href="#">Safety</a></li>
                <li><a href="#">Power</a></li>
                <li><a href="#">Sensors</a></li>
                <li><a href="#">Logic</a></li>
                <li><a href="#">Connection Devices</a></li>
                <li><a href="#">Operator Interface</a></li>
            </ul>
        </li>
        <li><a href="#.asp"><img src="images/nav-faq.jpg"></a></li>
        <li><a href="#.asp"><img src="images/nav-contact.jpg"></a></li>
        <li class="end"><a href="#.asp"><img src="images/nav-delivery.jpg"></a></li>
    </ul>
</div>

我使用的版本是IE9

Answer 1

你的html中是否有doctype html5声明（<!DOCTYPE html>）？如果不是，hover伪类可能无法在IE a以外的任何其他方面工作。这是一个常见的错误。

此外，您可以通过设置元标记（不推荐，它不是有效的html）或发送响应标头来强制IE（如果可能）在IE9（或最新可用）模式下工作： X-UA-Compatible: IE=edge，但自IE7以来，:hover问题被解决了。

此外，请尝试设置

nav ul li ul:hover {
    display: block;
}

来源：ie和http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/的过去问题。

Answer 2

你可以使用下面的代码，这个导航下拉列表由纯css制作并在ie7上测试，并且工作正常看看这个小提琴http://jsfiddle.net/sarfarazdesigner/u65SB/ 这是html代码

<ul id="nav">
    <li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Services</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul>    
    </li>
    <li><a href="javascript:;">Products</a></li>
    <li><a href="javascript:;">FaQs</a></li>
    <li><a href="javascript:;">Contact</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul> 
    </li>
    <li><a href="javascript:;">Blog</a></li>
</ul>

和css

#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{ 
    float:left; 
    border-right:1px solid #ccc;
    position:relative;
}
ul#nav li a{
    padding:0 15px;
    display:block;
    text-decoration:none;
    color:#fff;
}
#nav li a:hover{
    background:#ccc;
}
ul.subnavi{
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}
ul.subnavi li{
    display:block;
    width:120px;
    float:none;
}
ul#nav li ul.subnavi li a{
    color:#333;
}
ul#nav li ul.subnavi li a:hover {
    background:#333;
    color:#fff;
}
#nav li:hover ul{
    display:block;
}

Answer 3

我找到了解决方案，

它不完美，但它会做。

我刚刚为li ul {}

添加了背景色

它允许在IE中将鼠标悬停在下拉菜单上时唯一的问题是您需要点击实际链接文本以跟随链接，在其他浏览器中您可以单击下拉区域的任何位置。< / p>

现在这对我来说很好。

感谢所有人的回复

IE中的CSS下拉消失了

3 个答案: