Problemas com compatibilidade IE / FF

fala galera, eu to com um probleminha aqui, no IE 6 e 7 funciona bala, mais no FF o menu nao expande, alguem tem ideia do q seja??

segue codigo html/java script:

<script type="text/JavaScript">
<!--

startList = function() {
	if (document.all&&document.getElementById) {

 navRoot = document.getElementById("nav01");

 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", "");
 }
 }

 }

 // ******************************************

 navRoot = document.getElementById("nav02");

 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;

//-->

</script>
<link href="../css/monas.css" rel="stylesheet" type="text/css" />
<table width="100%">
 <tr>
	<td height="262" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td><a href="default.asp" class="fonte_menu">Home</a></td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><ul id="nav01">
 <li><a href="#" class="fonte_menu">A Empresa</a>
 <ul>
 <li><a href="site.asp?pag=36" class="fonte_menu">História</a></li>
 <li><a href="site.asp?pag=37" class="fonte_menu">Missão</a></li>
 </ul>
 </li>
 </ul></td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><ul id="nav02">
 <li><a href="#" class="fonte_menu">Os Florais</a>
 <ul>
 <li><a href="site.asp?pag=41" class="fonte_menu">Dicas</a></li>
 <li><a href="site.asp?pag=42" class="fonte_menu">Links</a></li>
 <li><a href="site.asp?pag=43" class="fonte_menu">Depoimentos</a></li>
 <li><a href="site.asp?pag=44" class="fonte_menu">Tratamento</a></li>
 </ul>
 </li>
 </ul></td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><a href="site.asp?pag=48" class="fonte_menu">Aromaterapia</a> </td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><a href="[http://www.monas.stormecom.com.br/produtos.asp?lang=pt_BR&tipo_busca=categoria&codigo_categoria=2"](http://www.monas.stormecom.com.br/produtos.asp?lang=pt_BR&tipo_busca=categoria&codigo_categoria=2) target="_blank" class="fonte_menu" >Produtos</a> </td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><a href="site.asp?pag=32" class="fonte_menu" >Galeria De Fotos</a> </td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><a href="site.asp?pag=33" class="fonte_menu">Mapa do Site</a> </td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
 <tr>
 <td><a href="site.asp?pag=45" class="fonte_menu" >Contato</a> </td>
 </tr>
 <tr>
 <td><img src="../images/layout/menu_linha.jpg" alt="" width="106" height="7" /></td>
 </tr>
	</table></td>
 </tr>
</table>

e css

ul {

	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	clear: both;
}

ul li {

	position: relative;
	clear: both;
}

li ul {

	position: relative;
	background: #6e599c;
	display: none;
	clear: both;
}

ul li a {

	position: relative;
	display: block;
	text-decoration: none;
	color: #FFF;
	border-bottom: 0;
	clear: both;
}

/ Fix IE. Hide from IE Mac \/
* html ul li { float: left; position: relative; clear: both; }
* html ul li a { height: 1%; position: relative; clear: both; }
/ End /

ul {

	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
	width: 100%;
	height:15px;
}

li:hover ul {

	display: block;
	position: relative;
	padding: 3px 3px 3px 25px;
}

li:hover ul, li.over ul {

	position: relative;
	padding: 3px 3px 3px 25px;
	display: block;
}

tentei fuçar no google, dynamicdrive, cssdrive ... mais nenhum funciona da maneira que espero ... em teoria, no mouseover ele exibe um submenu e no mouseout esconde o submenu ...

o endereço pra conferir eh http://www.stormredirect.com.br/monas/homesite/default.asp

agradeço se alguem puder ajudar ...

abs