IE6 CSS Hover Issues With Menu

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 h

Solution 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,

Solution 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.

Solution 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.

Solution 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.

Solution 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