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 Second up

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不能识别:hover伪类除了{{1 }}

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。

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

4 个答案: