Question

我有一个CSS悬停菜单，适用于所有浏览器，除了......惊喜 - IE6！

#menu_right ul li:hover ul { visibility: visible; }

显然，这个ul最初是隐藏的。当我将鼠标悬停在其父li上时，它应显示...但它不会显示。

为了尝试查明问题，我尝试将ul初始显示为，并让悬停操作采取其他措施。例如：

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

这没有用。在其他浏览器（包括IE7 +）上，当我将鼠标悬停在其父ul上时，list element将变为红色。但不是在IE6中。我错过了什么？

Answer 1

IE6不知道CSS :hover伪属性，当它出现在除链接元素之外的任何内容上时。你必须使用JavaScript。尝试使用条件语句，如果使用jQuery，则可以在3（+/-格式化）行中编写IE6的悬停效果：

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

Mark，在CSS语句中我使用了点而不是冒号。

干杯，

Answer 2

你应该使用这样的东西

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

并设置<a>而不是<li>的样式。您只需确保将a的大小设置为完全相同的大小，并将其封闭li。

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

您看到它适用于除IE6之外的所有浏览器的原因是，它仅支持:hover元素上的<a>。

Answer 3

看一下：hover http://www.xs4all.nl/~peterned/csshover.html。这个宝贝解决了各种奇怪的IE6悬停问题，可能会解决你的问题。

Answer 4

除了:hover之外的任何事情都没有<a> ...上帝我喜欢这个浏览器。

尝试使用：将鼠标悬停在位置方便的<a>上（如果它是一个链接列表，就像大多数CSS悬停菜单一样，这不会有问题），或者只是使用Javascript，如已建议的那样

Answer 5

正如Tal写的那样。我不知道它是如何与表一起工作的，但这个例子完全适用于IE6。

http://www.cssplay.co.uk/menus/final_drop.html

IE6 CSS Hover问题菜单

5 个答案: