IE6 CSS Hover问题菜单

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

干杯,