为什么以下下拉菜单悬停在 IE 上不起作用答案

【问题标题】：Why the following dropup menu hover doesn't work on IE为什么以下下拉菜单悬停在 IE 上不起作用
【发布时间】：2012-11-29 22:53:29
【问题描述】：

我看到了下面的下拉菜单示例：

http://jsfiddle.net/W5FWW/360/

html:

<div id="menu">
    <ul>
        <li><center><a href="#">Home</a></center>
                <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Disclaimer</a></li>
                </ul>
        </li>
    </ul>
</div>

这个例子在 Chrome 上非常适合我，但在 IE 9 上无法运行，
当我将鼠标悬停在菜单链接时，菜单应该会打开。
（当我在 jsfiddle 上打开它时它可以工作，但是当将它复制到 html 文件并独立运行它时它会失败）

为什么这在 Chrome 上有效而在 IE 9 上无效？我能做什么？

谢谢！

【问题讨论】：

你运行的是什么版本的IE？
你用的是哪个版本的IE？
它适用于我的 IE7、IE8、IE9 模式..
@EricG 如果您从 Fiddle.js 打开它，它可以工作，但如果将其复制到 html 文件并独立运行它会失败
@DorCohen 看到 John 的回答，doctype 可能吗？目前是 Quirksmode？span>

标签： css internet-explorer cross-browser hover

【解决方案1】：

你没有设置文档类型。

"注意：在 IE 中，必须声明一个 <!DOCTYPE> 以便 :hover 选择器在 <a> 元素之外的其他元素上工作。" http://www.w3schools.com/cssref/sel_hover.asp

您在<li> 上有一个:hover：

#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;
}

【讨论】：

对 HTML5 使用 <!DOCTYPE html>
对于 html4，你可以选择一个 doctype，你可能应该使用过渡的。 w3schools.com/tags/tag_doctype.asp。编辑：AYE Dor 不要删除你的 cmets。

【解决方案2】：

我已经对此进行了测试：

火狐17.0.1
铬 21.0.1180.89 m
IE 9.0.8112.16421

而且效果很好。

作为一个忠告，不要使用 CSS 下拉菜单进行按键导航，以防旧浏览器无法支持它。您可能会失去关键功能。

还取决于您的 DOCTYPE！ <center> 已过时，您应该考虑改用 CSS 居中。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css" />
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="centretext"><a href="#">Home</a>
                        <ul>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">Disclaimer</a></li>
                        </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

【讨论】：

OP 没有说明 DOCTYPE。无论哪种方式，将样式与内容分开仍然是最佳做法。

【解决方案3】：

我可以让它失败的唯一方法是将 IE 投入 Quirks 模式。确保你的文件中有一个有效的文档类型，你应该没问题。请告知这是否不是问题:)

【讨论】：

【解决方案4】：

这是在 IE7/8/9 和其他浏览器上运行的完整代码。请阅读Doctype declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div, ul, li{ padding:0; margin:0; list-style:none;}
#menu { 
    margin-top: 100px;
    float: left;
    line-height: 10px; 
    left: 200px;}
#menu a { 
    display: block; 
    text-decoration: none; 
    color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover { 
    background: #ECF1E7; 
    padding-left:9px;
    border-left: solid 1px #000;}
#menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #B0BD97;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #B0BD97;
    z-index:1;
}
#menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;}
#menu ul li {
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
    background: #979E71;}
#menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;}
#menu li{ 
    position:relative; 
    float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;}
#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;}
#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 10px;
}
#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}
</style>
</head>

<body>
<div id="menu">
    <ul>
        <li><center><a href="#">Home</a></center>
                <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Disclaimer</a></li>
                </ul>
        </li>
    </ul>
</div>
</body>
</html>

【讨论】：