0

我知道我已经经历了很多关于这个的问题，但答案并没有解决我的问题。

我制作了一个 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

4

3 回答 3

1

<!DOCTYPE html>您的 html 中是否有 doctype html5 声明 ( )？如果没有，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/的过去问题。

于 2013-04-26T09:03:14.667 回答
0

我找到了我的解决方案

它并不完美，但它会做到。

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

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

不过现在这对我来说很好。

谢谢大家的回复

于 2013-04-26T09:46:19.057 回答
0

您可以使用下面的代码这个导航下拉菜单由纯 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;
}
于 2013-04-26T09:27:43.890 回答