gpt4 book ai didi

html - CSS 下拉菜单在 IE 中消失

转载 作者:太空宇宙 更新时间:2023-11-04 15:03:05 24 4
gpt4 key购买 nike

我知道有很多关于此的问题我已经解决了,但答案并不能解决我的问题。

我制作了一个 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 声明 ( <!DOCTYPE html> )?如果不是,悬停伪类可能无法在 IE 中除 a 以外的任何东西上工作。这是一个常见的错误。

此外,如果可能,您可以通过设置元标记(不推荐,它不是有效的 html)或发送响应 header 来强制 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/ 过去的问题。

关于html - CSS 下拉菜单在 IE 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16231743/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com