show/hide ul li in IE6 issue

[omerbutt]

hi
i have a menu ul li based in which i have to show the third level i have done the most of the part but for IE 6 it is like hell
the show/ hide is not working in IE6 for ul li menu it is working fine in all other browsers
i have used the javascript for showing the sub-menu (level 2) which applies the onmouseover and onmouseout class via javascipt to show or hode the ul by switching the class , but the problem is that the script work for the li in the first level only an after spendng so much time i could not figure out that how is this script is going to access the li of the third level to apply the mouse over function
here is the url for the site
URL
you can see the LOGIN link in the tabbed menu working in firefox where as in IE6 it is not showing it
the script and css used is
[code=javascript]
startList = function() {
if (document.all&& document.getEle mentById) {
navRoot = document.getEle mentById("nav") ;
alert(document. getElementById( "nav").childNod es[0].childNodes.len gth);
for (i=0; i<navRoot.child Nodes.length; i++) {
node = navRoot.childNo des[i];
if (node.nodeName= ="LI") {
node.onmouseove r=function() {
this.className+ =" over";
}
node.onmouseout =function() {
this.className= this.className. replace(" over", "");
}
}
}

}
}
window.onload=s tartList;
[/code]
[code=css]
#divNav {
margin: 0;
padding: 0;
height: auto;
width: 970px;
}

#nav {
position: relative;
top: 0px;
height: auto;
width: 970px;
padding:0;
margin:0;
display:block;
}

#nav li ul, #nav li ul {
margin: 0;
padding: 0;
float:left;
}
nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding:0;
}

#nav li ul {
display: none;
}

#nav li ul li a {
height: 29px;

}

#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 27px;
left: 0;
padding-top: 0px;
background:url( images/img-028.png) left top repeat-x;
width:980px;
height:29px;
padding-left: 0px;
}

#nav li.on ul {
background:url( images/img-028.png) left top repeat-x;
width:980px;
height:29px;
}

#nav li.on ul li.on a {
color: #000;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background:url( images/img-028.png) left top repeat-x;
width:980px;
height:29px;
}
color: #000000;
line-height: 25px;
display: block;
padding: 0;
}

#nav li.on a {
color: #e501a7;
font-size:12px;
font-weight:bold;
}


#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #e501a7;
width: auto;
margin-right: 0px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background:none ;
font-size:12px;
font-weight:bold;
}

#nav li.on ul {
display: block;
}

#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover {
color: #e501a7;
}

#nav li.off ul li.off a:hover, #nav li.on ul li.off a:hover {
color: #ffffff;
text-decoration:unde rline;
}

/*do the image replacement*/

#nav li span {
position: absolute;
left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
display: block;
position: relative;
height: 26px;
background: url(bk-dropdownMap.gif ) no-repeat; /*contains all hover states*/
}
/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background:none ;
color: #e501a7;
font-family: arial;
font-size:12px;
font-weight:normal;
line-height: 20px;
}

#nav li.on ul li.off a {
font-family:arial;
font-size:12px;
font-weight:normal;
}

#nav li.on ul li a, #nav li.off ul li a{
display:inline-block;
font-size:12px;
font-weight:normal;
color:#ffffff;
line-height:2.5;
text-decoration:none ;
width:150px;
height:auto;
padding:0;
margin:0;
}
#nav li a{
background:url( ../../templates/rhuk_milkyway/images/img-027.png) left top no-repeat;
width:203px;
height:29px;
display:inline-block;
line-height:2;
text-decoration:none ;
padding:0;
margin:0;
font-size:12px;
font-weight:bold;
color:#434343;
text-align:center;
}
#nav li.on ul{
background:url( ../../templates/rhuk_milkyway/images/img-028.png) left top repeat-x;
width:980px;
height:29px;
}
#nav li.off ul li.off a{
font-family:arial;
}

#nav li.off a:hover{
color:#fff;
background:url( ../../templates/rhuk_milkyway/images/img-023.png) left top no-repeat;
width:203px;
height:29px;
}
#nav li.on ul li a:hover{
color:#fff;
width:150px;
background:none ;
}
#nav li.on a{
color:#434343;
}
#nav li.on a:hover{
color:#fff;
}
#nav li.on a{
background:url( ../../templates/rhuk_milkyway/images/img-026.png) left top no-repeat;
width:150px;
height:29px;
padding:0;
margin:0;
font-size:12px;
font-weight:bold;
color:#ffffff;
line-height:2;
text-decoration:none ;

}
#nav li.off ul li a:hover{
color:#fff;
width:150px;
background:none ;
}
#nav li.on ul li.on a{
font-family:arial;
color:#fff;
font-size:12px;
}




#nav li.off ul li.off ul{
width:220px;
left:auto;
right:0px;
padding:0;
margin:0;
top:29px;
display:none;
}
#nav li.on ul li.off ul{
width:220px;
left:auto;
right:0px;
padding:0;
margin:0;
top:29px;
display:none;
}
#nav li.on ul li.off ul li{
width:110px;
padding:0;
margin:0;
}
#nav li.off ul li.off ul li{
width:110px;
padding:0;
margin:0;
}

#nav li.on ul li.off ul li a{
font-size:11px;
text-indent:0;
padding:0;
margin:0;
text-align:center;
width:110px;
}
#nav li.off ul li.off ul li a{
font-size:11px;
text-indent:0;
padding:0;
margin:0;
text-align:center;
width:110px;
}
#nav li.on ul li.off:hover ul , #nav li.over ul li.over ul{
display:block;
}
#nav li.off ul li.off:hover ul , #nav li.over ul li.over ul{
display:block;
}
[/code]
[/code]