I've been updating a menu system to provide dropdowns following the tutorial in AListApart (http://www.alistapart.com/articles/dropdowns/) and have almost got it working. At the moment everything is fine in Firebird but IE won't show the proper image for the rollover. I'm 99% sure it's something I need to add to the JavaScript but I can't seem to get it. You can see the problem here


In IE there is a rollover white image that is supposed to appear when you go over a menu option but it isn't working

The script is as follows

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
It works fine for the <li> style, i.e. the top level of the menu, but not for the second level <li>. I've tried changing the script to look for "li li" as that's the style of the second tier but no joy.

Style is as follows

#menu ul {
z-index: 5;
list-style: none;
padding: 0;
margin: 0;
background: url(../images/global/menu/menu_background_off.gif) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;}

#menu li {
float: left;
position: relative;
padding: 3px 10px 3px 10px;
text-align: center;
cursor: default;
background: url(../images/global/menu/menu_background_off.gif) repeat;
border: 1px #000000 solid;
border-left: 1px #dddddd solid;}
#menu li:hover {
margin: 0px;
background: url(../images/global/menu/menu_background_on.gif) repeat;}
#menu li a {
color: #000000;}
#menu li a:visited {
color: #000000;}
#menu li a:hover {
color: #000000;
text-decoration: none;}
#menu li#first {
border-left: 1px #000000 solid;}

#menu li ul {
display: none;
position: absolute;
width: 150px;
top: 21px;
left: 0;
padding-left: 10px;
background: url(../images/global/menu/menu_dropdown_background_off.gif) #003366 bottom right no-repeat;
border: 1px #000000 solid;
border-right: 5px #000000 solid;}

#menu li li {
display: block;
float: none;
background: none;
color: #ffffff;
border: 0px;
text-align: left;
padding: 3px 5px 3px 5px;
margin: 0px;
font-size: 11px;}
#menu li li:hover, #menu li li.over {
background: url(../images/global/menu/menu_dropdown_background_on.gif) #ffffff bottom right no-repeat;
color: #333333;}
#menu li li a{
color: #ffffff;}
#menu li li:hover a {
color: #333333;}

#menu li:hover ul, #menu li.over ul {
display: block;}

Any help much appreciated as it's just this final step that I'm missing