css - 为什么下面的下拉菜单悬停在 IE 上不起作用

Question

我看到了以下下拉菜单示例:

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？我能做什么？

谢谢!

Answer 1

你没有文档类型集吧？

“注意:在 IE 中，必须为 :hover 选择器声明一个 <!DOCTYPE>，才能处理 <a> 元素以外的其他元素。” http://www.w3schools.com/cssref/sel_hover.asp

你有一个 :hover在 <li> 上:

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