IE6 CSS Hover issues with menu

Question

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

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

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

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; }

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?

Answer 1

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]-->

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

Cheers,