Getting javascript to work with css hover menus

JavaScript
1

Hi all,

I have a 3 tier hover menu that’s in CSS and works in all browsers except IE.

I’m trying to add js to the menu to make it work in ie, with no luck.
I’m not receiving any errors through firebug…

here’s the js I’m trying to use:


dropNav = function() {
if (document.getElementById) {
navRoot = document.getElementById("access");
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", "");
   }}}}}
window.onload=dropNav;

here’s a pared down version of the css:



#access ul li{
	float: left;	
	position: relative;
}
#access ul li a{
	display: block;
	width: 100px;
}
#access ul ul {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	float: left;
}
#access ul ul ul{
	display: none;
	position: absolute;
	top: 32px;
	left: 0;
	float: left;
}
#access ul li:hover > ul, #access ul li.over > ul {
	display: block;
}

Any suggestions, tips or pointing in the right directions would be greatly appreciated.

Thanks in advance!