Html CSS下拉列表在IE中消失

我知道关于这件事已经有很多问题了，我已经经历了这些问题，而这些问题的答案并不能解决我的问题

我制作了一个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您的html中有doctype html5声明（

）吗？如果不是，则hover伪类在IE中除了

a

之外可能无法工作。这是一个常见的错误

此外，如果可能，您可以通过设置元标记（不推荐，它不是有效的html）或发送响应头，强制IE在IE9（或最新可用）模式下工作：

X-UA-Compatible:IE=edge

，尽管

：hover

问题自IE7以来被认为已修复

此外，尝试设置

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

---

来源：ie和的过去问题。

你可以使用下面的代码，这个导航下拉列表由纯css制作，在ie7上测试，运行良好 看看这把小提琴 下面是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>

---

我找到了解决办法

它并不完美，但可以

我刚刚给li ul{}添加了背景色

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

这对我来说已经很好了

---

感谢您的回复，每个人

请指定您的IE版本，因为它会随着版本的变化而改变行为，需要处理的浏览器有很多问题..编辑后的帖子将包含IE版本…只是为了澄清一下，它是IE9，请尝试更改显示：block；显示：内联；在#nav ul li中并移除显示：块；在#nav li:hover ul.Fiddle for lazy guy:）中，jsfiddle并不代表它在IE9中的外观。对我来说，它在IE9中不起作用是的，我有一个doctype我总是打开dreamweaver，从一个新文件中获取doctype，然后在记事本++中继续工作，那是html5 doctype吗？或者html4/xhtml？它尝试使用html5 doctype（

）来代替答案中提到的，我猜OP没有必要改变他的实际解决方案，如果它在IE兼容性方面只有一些小问题可以解决。是的，但我并不是说要使用

这个，我只是制作一个演示文件并复制粘贴到这里来展示一个示例演示

#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;
}