IE中CSS下拉列表消失

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

您的<!DOCTYPE html>是否有doctype html5声明（ <!DOCTYPE html> ）？ 如果没有，hover伪类可能无法在IE浏览器上以外的任何a 。 这是一个常见的错误。

另外，您可以通过设置元标记（不推荐，它不是有效的html）或发送响应标头来强制IE在IE9（或仅是最新可用的）模式下运行，但可以通过以下方式发送响应标头： X-UA-Compatible: IE=edge ，尽管:hover问题据说自IE7起已修复。

此外，尝试设置

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中将鼠标悬停在下拉菜单上时，它可以保留下拉菜单，唯一的问题是您需要单击实际的链接文本以跟随链接，就像在其他浏览器中一样，您可以在下拉区域的任何位置单击。

现在对我来说这很好。

谢谢大家的答复

IE中CSS下拉列表消失

问题描述

3 个解决方案

解决方案1
1 2013-04-26 09:03:14

解决方案2
0 2013-04-26 09:27:43

解决方案3
0 已采纳

IE中CSS下拉列表消失

问题描述

3 个解决方案

解决方案1 1 2013-04-26 09:03:14

解决方案2 0 2013-04-26 09:27:43

解决方案3 0 已采纳

解决方案1
1 2013-04-26 09:03:14

解决方案2
0 2013-04-26 09:27:43

解决方案3
0 已采纳