IE 6 和 7 中的纯 CSS 下拉菜单问题

Question

我有一个带有下拉菜单的纯 CSS 菜单，在 IE8 和 FF 中效果很好，但在 IE7 和 IE6 的兼容模式下它不起作用。

问题是，它确实会下拉 - 但是当鼠标移到下面的主要网站横幅上时，其中有一个巨大的图像，下拉菜单消失了......

我不想在此处放置链接，因此，您可能可以从我的个人资料中找到该网站。

但是这里有一些代码。先上菜单。

<ul id="menu">
<li><a href="***.php" title="Unihost Web Hosting Home Page">Home</a></li>
<li><a href="#">Company</a>
<ul>
<li><a href="***.php" title="About Unihost">About us</a></li>
<li><a href="***.php" title="We're going green, are you?">Going Green</a></li>
<li><a href="***.php" title="Unihost Privacy Policy">Privacy policy</a></li>

<li><a href="***.php" title="Unihost Terms and Conditions">Terms and conditions</a></li>    
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="***.php" title="Register a domain with us" target="_blank">Domain Registrations</a></li>    
<li><a href="***.php" title="PHP Web hosting packages">PHP Web Hosting Packages</a></li>
<li><a href="***.php" title="Our E-mail hosting packages">Email Hosting Packages</a></li>

</ul>
</li>
<li><a href="">Contact us</a>
<ul>
<li><a href="***.php" title="Contact support" target="_blank">Support</a></li>
<li><a href="***.php" title="Pre-sales Questions" target="_blank">Pre-sales Questions</a></li>
</ul>

</li>
<li><a href="">Client Area</a>
<ul>
<li><a href="***.php" target="_blank">Register</a></li>
<li><a href="***.php " target="_blank">Login</a></li>
<li><a href="***" target="_blank">Client Area</a></li>
<li><a href="***" target="_blank">Knowledgebase</a></li>

<li><a href="***" target="_blank">Help Ticket System</a></li>
</ul>
</li>  
</ul>

Css 秒了

ul {
font-family:Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:700;
list-style:none;
float:right;
margin:0;
padding:0;
}

ul li {
display:block;
position:relative;
float:left;
border-right:1px solid #ccc;
}

li ul {
display:none;
}

ul li a {
display:block;
text-decoration:none;
color:#c00;
border-top:1px solid #ededed;
background:#ededed;
margin-left:1px;
white-space:nowrap;
text-transform:uppercase;
padding:8px 15px;
}

ul li a:hover {
background:#c00;
color:#fff;
}

li:hover ul {
display:block;
position:absolute;
border-right:0;
}

li:hover li {
float:none;
font-size:11px;
border-right:0;
}

li:hover a {
background:#444;
color:#fff;
border-top:1px solid #555;
border-right:0;
text-align:left;
}

li:hover li a:hover {
background:#dedede;
color:#c00;
border-right:0;
}

任何帮助将不胜感激。提前致谢。

Answer 1

纯 CSS 菜单存在许多问题，尤其是 diagonal problem。我建议切换到 Javascript - 这应该可以解决浏览器兼容性问题并使菜单更实用。

如果你使用 jQuery，我推荐Superfish。

Answer 2

据我所知，在 IE6 中您必须使用 javascript 才能使您的菜单工作。我写了一篇关于 Instantshift 的文章，您可能想看看：

• Create Simple Dropdown Menu Using jQuery

Answer 3

您有几个选项可以让菜单在 IE6 中运行。听起来您在 IE8 中使用兼容模式进行测试 - 这绝对不是类似于实际使用 IE6 来查看网站。

至于让纯 CSS 下拉菜单在 IE6 中工作，简单的答案是：你不能，因为 IE6 不能识别 <a> 以外的任何东西上的 :hover 伪类。

IE7.js 是一个很棒的 JS 库，它可以更正 CSS 错误并为旧版本的 IE 添加不支持的功能，非常值得一看。

您还可以通过实施 Pushup 来鼓励您的用户升级，您可以在 pushuptheweb.com 上找到它（抱歉，只能发布 1 个链接）。

说实话，你真的应该按照其他海报的建议做，从你的标记中去掉表格。这是一种非常过时的布局技术，可以用非常少量的语义 HTML 和 CSS 代替。

Answer 4

首先，IE6 已经死了，IE6 Funeral

其次，对于 IE7，您可能必须将 z-index 放入您的 ul 并用 div 包裹您的图像，然后将 z-index 放在上面。 ul 的 z-index 应该高于您使用图像包装的 div 的 z-index。