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,

Answer 2

You should use something like this

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

and style the <a> instead of the <li>. You just have to make sure that you size the a to be the exact same size as its enclosing 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;
}

The reason you are seeing that it works on every browser except IE6, is that it supports :hover only on <a> elements.

Answer 3

Take a look at whatever:hover http://www.xs4all.nl/~peterned/csshover.html. This baby solves all sorts of weird IE6 hover problems, might solve yours.

Answer 4

No :hover on anything but <a>... God I love this browser.

Try to use :hover on a conveniently-located <a> (if it's a list of links, like most CSS hover menus, it won't be a problem ), or just go with Javascript, as already suggested.

Answer 5

It is exactly as Tal wrote. I do not know how it works with table but this example WORKS in IE6 perfectly.

http://www.cssplay.co.uk/menus/final_drop.html