Warum li menue +CSS gagga in verschiedenen Browsern

[Achim]

Hallo,
Ich habe mit try+error "gebastelt, bin eben mehr ein "Papiertiger", möchte gern a bisserl html frickln können, aber auch gerne verstehen.
Ich  habe folgendes Problem:

NUR der Firefox ignoriert den "mainframe" aufruf und öffnet ein weiteres Fester.
NUR der Firefox ignoriert die verkleinerte Schrift im li menue. Habe em, px und % versucht.
Im IE (WIN) , Safari und OmniWeb gehts.

Kann mir jemand helfen?

Das javazeug:

<script type="text/javascript">
<!--
window.onload=menue;
function menue(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
</script>

Das CSS:

#menu {
 position: absolute;
 top: 150px;
 left: 5px;
 width: 125px;
 height: 321px;
 z-index: 51;
}

#menu dt {
 z-index: 10;
 cursor: pointer;
 font-size: 12px;
 font-weight: normal;
 line-height: 20px;
 margin: 9px 0px ;
 text-align: right;
 font-family: Arial, Helvetica, Verdana, sans-serif;
 color: #8B0000;
 background-color:#E1E1E3;
 padding-right: 3px;
 }

#menu dd {
 z-index: 10;
 cursor: pointer;
 position: absolute;
 left: 85px;
 width: 125px;
 margin-top: -25px;
 border: 1px solid #E1E1E3;
 background-color: #FFFFFF;
 text-align: left;
}

#menu li {
 z-index: 10;
 font-family: Arial, Helvetica, Verdana, sans-serif;
 font-size: 10px;
 margin-left: -29px;
 margin-bottom: 8px;
 margin-top:  8px;
 padding-left: 0px;
 padding-bottom: 5px;
 border-bottom-width:1px;
 border-bottom-style:dotted;
 border-bottom-color:#999999;
 color: white;
 background-color: #FFFFFF;
 }

#menu li a:link  {color: #8B0000;font-size: 100% ; display: block;text-decoration: none }
#menu li a:visited  {color: #8B0000;font-size: 100% ;display: block; text-decoration: none }
#menu li a:hover  {color: #8B0000;font-size: 103%; display: block;text-decoration: none; background:#E1E1E3}
#menu li a:active  {color: #8B0000;font-size: 100% ;display: block; text-decoration: none }

Das menue (Auszug):

<dl id="menu">
  <dt  onmouseover="javascript:menue('smenu1');">HOME</dt>
   <dd id="smenu1" onMouseOver="javascript:menue('smenu1');" onMouseOut="javascript:menue();">
    <ul>
     <li> <a href= "home.html" target= "mainFrame">DFG</a></li>
     <li> <a href= "personal.html" target= "mainFrame">PERSONAL</a></li>

</ul>
   </dd>
</dl>