我使用下面的 HTML 程序创建带有水平子菜单的水平菜单栏。它在 Fire Fox 和 Chrome 中工作正常但在 IE 中不起作用。那么什么是该程序是否需要更改？
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul class="child">
<li><a href="#">Hard Drives</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Speakers</a>
<ul class="child">
<li><a href="#">10 watt</a></li>
<li><a href="#">20 watt</a></li>
<li><a href="#">30 watt</a></li>
</ul>
</li>
<li><a href="#">Random Equipment</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="child">
<li><a href="#">Repairs</a></li>
<li><a href="#">Installations</a></li>
<li><a href="#">Setups</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
最佳答案
您使用 modernizr 吗？或者有适用于旧版 IE 浏览器的类？您可能想尝试为 IE 使用单独的样式和/或样式表。
或者
您可以将导航从 float block 切换到“内联”元素，IE6 等不支持 float 的旧版浏览器可以识别这些元素。
或者
如果您想坚持使用 float ，请确保为任何 float 元素设置“宽度”。
Chris Coyier 有一篇关于 float 的不错的文章，其中包含一个标记为“Problems with Floats”的部分 http://css-tricks.com/all-about-floats/
关于html - 带有水平子菜单的水平菜单栏在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15491557/