IE6 CSS Hover Menu Issues
I have a CSS hover menu that works in all browsers except ... surprise - IE6!
#menu_right ul li:hover ul { visibility: visible; }
This is ul
hidden from the beginning, obviously. When I find above the parent li
, it should appear ... but it doesn't.
To try and pinpoint the problem, I tried making it ul
initially visible and the hover action took up something else. For example:
#menu_right ul li ul { visibility: visible; }
#menu_right ul li:hover ul { background: red; }
It won't help. In other browsers (including IE7 +), it ul
turns red if I visit its parent list element
. But not in IE6. What am I missing?
source to share
IE6 doesn't know the CSS pseudo-attribute :hover
if it's displayed on anything other than the link element. You will have to use JavaScript for this. Try conditional statements, and if you're using 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]-->
Note that in the CSS instructions I used a period instead of a colon.
Greetings,
source to share
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 <a>
instead <li>
. You just need to make sure the size a
is exactly the same size as its 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 see it working in every browser except IE6 is because it :hover
only supports elements <a>
.
source to share
Look at anything: hover http://www.xs4all.nl/~peterned/csshover.html . This kid solve all sorts of strange IE6 freeze issues, might solve your problem.
source to share