IE6 CSS悬停问题菜单 [英] IE6 CSS Hover issues with menu

问题描述

我有一个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 +）上，当我将鼠标悬停在其父列表元素上时， 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的悬停效果（+/-格式化）行：

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.

干杯，

这篇关于IE6 CSS悬停问题菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！