Update:
I've added a bounty to this. To claim it, I need a version of the code below that does NOT exhibit the symptoms I describe.
Here's a simple test case. In Chrome, Firefox, and IE8 with compatibility mode off, this works as expected. However, turn on compatibility mode (toggle Tolls->Compatibility View) there's a glitch with the way some of the menu block show & hide.
To see the issue:
Save the example to a file, and view it via web browser (note that if you simply load it from a file, you can't turn on compatibility view - it has to be delivered from a web server).
Move the mouse from "Here" to "There" to "Everywhere", then down so that "No" is highlighted, and the 3rd level menu is displayed. Move the mouse out to the left. Only the top menu is displayed.
Now repeat the steps. When you hit "Everywhere" the 2nd time, the 3rd level menu block is shows, but with nothing in it.
Is there any way to prevent this from happening, even in Compatibility View?
Sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
#navRaw, #navRaw ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 26px;
}
#navRaw a{
display: block;
padding: 0px 5px;
color: #000;
text-decoration: none;
background-color: silver;
line-height: 28px !important;
}
#navRaw a:hover{
background-color: #ccc;
color: #fff;
}
#navRaw li{
float: left;
position: relative;
}
#navRaw ul{
position: absolute;
display: none;
top: 28px;
}
#navRaw li ul a{
width: 220px;
height: auto;
float: left;
}
#navRaw ul ul{top: auto;}
#navRaw li ul ul{
left: 230px;
margin: 0px 0 0 0px;
}
#navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul{ display: none;}
#navRaw li:hover ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{
display: block;
border: 1px solid Black;
}
</style>
</head>
<body>
<ul id="navRaw">
<li><a href="#"><b>Here</b></a></li>
<li><a href="#"><b>There</b></a></li>
<li><a href="#"><b>Everywhere</b></a>
<ul>
<li><a href="#"><b>Yes</b></a></li>
<li class="showsub"><a href="#"><b>No</b></a>
<ul>
<li><a href="#"><b>Why</b></a></li>
<li><a href="#"><b>Why not</b></a></li>
</ul>
</li>
<li class="menusep"><a href="#"><b>Perhaps</b></a></li>
</ul>
</li>
</ul>
</body>
</html>
I need a version of the code below that does NOT exhibit the symptoms I describe.
SOLUTION
EMENDED CSS
#navRaw li:hover > ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{
display: block;
border: 1px solid black;
}
#navRaw li:hover ul li ul li a {background-color:transparent}
#navRaw li li:hover ul li a {background-color:silver !important}