IE6 CSS Hover问题菜单

Question

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

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

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

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

#menu_right ul li ul { visibility: visible; }

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

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

Answer 1

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

<!--[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 <=>元素。

Answer 3

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

Answer 4

除了:hover之外，

没有<a> ......上帝，我喜欢这个浏览器。

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

Answer 5

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

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