0

我正在尝试使用纯 css 构建一个垂直弹出菜单。像这个：

http://devinrolsen.com/wp-content/uploads/2009/09/fig4.gif

一切都在 FF、Opera、Chrome 中完美运行，但在 Internet Explorer 9 中却不行，在浏览菜单项时子级别不显示。诀窍在哪里？

这是完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<style type="text/css">
#navigation{font-size: 20px; width: 150px}
#navigation ul{margin: 0px;padding: 0px;}
#navigation li{list-style: none;}
ul.top-level{background: #686868}
ul.top-level.li{
border-style: solid;
border-width: 2px;}
#navigation a{
color: #ffffff;
display: block;
height: 25px;
line-height: 25px;
text-indent: 10px;
text-decoration: none;
width: 100%
}
#navigation a:hover {text-decoration: underline; background-color: #000000; position: relative;}
#navigation li:hover {position: relative;}

ul.sub-level {display: none}
li:hover .sub-level{
background: #000000;
display: block;
width: 150px;
position: absolute;
left: 75px;
top: 5px;
}

</style>

</head>
<body>

    <div id="navigation">
        <ul class="top-level">
            <li><a href="#">Home</a>
                <ul class="sub-level">
                    <li><a href="#">Sub Menu Item 1</a></li>
                    <li><a href="#">Sub Menu Item 2</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                    <li><a href="#">Sub Menu Item 4</a></li>
                    <li><a href="#">Sub Menu Item 5</a></li>
                </ul>
            </li>
        </ul>       
    </div>

</body>
</html>
4

1 回答 1

0

我懂了。该问题可以通过指定 IE9 需要的 DocType 来解决。替换以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

和：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

子菜单现在应该“神奇地”出现。

于 2012-08-11T19:19:02.310 回答