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

据我所知，你的菜单必须借助javascript才能在IE6中工作。我写了一篇关于即时移动的文章，你可能想看看：

• Create Simple Dropdown Menu Using jQuery

Answer 3

有几个选项可以让菜单在IE6中工作。这听起来像是在使用IE8中的兼容模式进行测试--这绝对不同于实际使用IE6查看站点。

就让纯CSS下拉菜单在IE6中工作而言，简单的答案是:你不能，因为IE6不能识别除<a>以外的任何:hover伪类。

IE7.js是一个很棒的JS库，它纠正了CSS的bug，并在旧版本的IE中添加了不受支持的功能，非常值得一看。

你也可以通过实现Pushup来鼓励你的用户升级，你可以在pushuptheweb.com上找到(对不起，只能发布1个链接)。

老实说，你真的应该按照另一个发帖者的建议去做，把表格从你的标记中去掉。这是一种非常过时的布局技术，可以用少量的语义HTML和CSS来替代。