IE6 CSS 悬停菜单问题

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

I have a CSS hover menu which works in all browsers except... surprise -- IE6!

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

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

This ul is hidden initially, obviously. When I hover over its parent li, it should show up... but it doesn't.

为了找出问题所在,我尝试让 ul 最初 可见 并让悬停动作采取其他方式.例如:

To try to pinpoint the problem, I've tried making the ul initially visible and had the hover action take on something else. For example:

#menu_right ul li ul { visibility: visible; }

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

这没有帮助.在其他浏览器(包括 IE7+)上,当我将鼠标悬停在其父 list 元素 上时,ul 将变为红色.但不是在 IE6 中.我错过了什么?

This doesn't help. On other browsers (including IE7+), the ul will turn red when I hover over its parent list element. But not in IE6. What am I missing?

推荐答案

IE6 不知道 CSS :hover 伪属性,当它出现在除了链接元素之外的任何东西上时.为此,您将不得不使用 JavaScript.试试条件语句,如果你使用jQuery,可以在3(+/- 格式)行:

IE6 doesn't know the CSS :hover pseudo-attribute, when it appears on anything than a link element. You will have to use JavaScript for this. Try conditional statements, and if you use jQuery, you can code the hover effect for IE6 in 3 (+/- formatting) lines:

<!--[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 语句中使用了点而不是冒号.

Mark, that in the CSS statements I used the dot instead of the colon.

干杯,

相关文章