我正在尝试使用纯 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>
最佳答案
哦，我明白了。可以通过指定 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">
子菜单现在应该“神奇地”出现。
关于Internet Explorer 9 中的 CSS 垂直菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11916616/