menu a tendina con css: problemi con IE6

[ValentinZuko]

ciao a tutti.
Ho un menu CSS+Javascript che funziona benissimo su tutti i browser eccetto che con Ie6.
Essendo uno script semplicissimo vorrei cortesemente che qualcuno mi desse una dritta su come rendere il menu compatibile anche con explorer.

ecco il menu (è contenuto dentro una tabella)

td  align="right" valign="bottom"><ul id="nav"> [*][img]images/linguetta001.jpg[/img]
 <ul> [*]CHI SIAMO [*]MISSION [*]STORIA [/list]
 		  </td>
          <td  align="right" valign="bottom"><ul> [*][img]images/linguetta002.jpg[/img]
 <ul> [*]PRODOTTI [*]SERVIZI [/list]
 </td>
          <td  align="right" valign="bottom"><ul> [*][img]images/linguetta003.jpg[/img]
 <ul> [*]ASSISTENZA ONLINE [*]ASSISTENZA DOMICILIARE [*]ASSISTENZA ONSITE [/list]
 </td>
          <td  align="right" valign="bottom"><ul> [*][img]images/linguetta004.jpg[/img]
 <ul> [*]COME CONTATTARCI [*]FAQ [/list]
 [/list]</td>

Retto da questo javascript

startList = function() { 
 if (document.all&&document.getElementById) { 
 navRoot = document.getElementById(”nav”); 
 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=startList;

e questo css

ul { 
 padding: 0; 
 margin: 0; 
 list-style: none; 
 }
 
 li { 
 float: left; 
 position: relative; 
 width: 10em;
 display:inline; 
 }
 
 li ul { 
 display: none; 
 position: absolute; 
 top: 1em; 
 left: 0; 
 }
 
 li > ul { 
 top: auto; 
 left: auto;
 }
 
 li:hover ul, li.over ul{ display: block;  background-color:#0033FF;
 width:100px;
 height:90px; }

come ho detto funziona su Firefox, su safari ma non su IE6... why?????