CSS menu items flickering in IE6
- by Quick Joe Smith
Edit #1: I have just discovered this flicker bug affects IE8 (and therefore most likely IE7) as well.
I am putting together a pure-CSS dropdown menu (mostly a learning exercise) and have hit a point in IE where the submenu items are flickering as the mouse moves around within the <li> but outside the inner <a>.
Source code is as follows:
The included csshover3.htc is downloadable from Peter Nederlof's page for Whatever:hover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Menu</title>
<style type="text/css">
body {
behavior: url("csshover3.htc");
}
div#navbar {
background-color:#333;
font-size:1.4em;
overflow:auto;
}
div#navbar ul {
display:inline-block; /* ie6 float container bug */
list-style:none;
margin:0px;
padding:0px;
}
div#navbar ul.menu li {
float:left;
display:inline; /* ie6 double-margin bug */
}
div#navbar ul.menu a {
display:block;
text-decoration:none;
color:#fff;
padding:5px 10px;
}
div#navbar ul li a:link,
div#navbar ul li a:visited {
text-decoration:none;
}
div#navbar ul li a:hover {
color:#333;
background-color:#f6c323;
}
div#navbar ul.menu ul {
display:none;
}
div#navbar ul.menu li:hover ul {
display:block;
position:absolute;
background-color:#333;
}
div#navbar ul.menu li:hover ul li {
float:none;
}
div#navbar ul.menu li:hover ul ul {
display:none;
}
div#navbar ul.menu li:hover li:hover {
position:relative;
}
div#navbar ul.menu li:hover li:hover ul {
display:block;
position:absolute;
left:100%;
top:0;
}
</style>
</head>
<body>
<h1>CSS Menu</h1>
<div id="navbar">
<ul class="menu">
<li><a href="#">A</a></li>
<li>
<a>B</a>
<ul>
<li><a href="#">123</a></li>
<li><a href="#">2</a></li>
<li>
<a>Tweee</a>
<ul>
<li><a href="#">Phwoar</a></li>
<li><a href="#">Gr</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">C</a></li>
</ul>
</div>
</body>
</html>
Live demo: http://jsfiddle.net/4q6Vw/
Any help is appreciated.
