IE6的CSS悬停与菜单的问题(IE6 CSS Hover issues with menu)

我有一个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]-->

马克，当在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>元素。