Pb Firefox menu déroulant

Bonjour,
j'ai créé un menu déroulant horizontal qui disparait avec un onmouseout et onblur. Tout marche très bien sous IE mais sous Firefox, c'est, disons assez alèatoire : en fait, en passant sur la rubrique, mon sous-menu s'affiche et lorsque je déplace ma souris sur celui-ci, ça "saute" et souvent, le menu disparait avant même que j'ai pu cliquer sur une des sous-rubriques.

Voici mon code HTML :

<div id="menu"> 
  <dl>
         <p id="menu1">
	<dt onblur="show('');" onmouseover="show('smenu1');" onfocus="show('smenu1');" onmouseout="show('');">
	   <a href="javascript:;">
		Rub1 
	   </a>
	</dt>
          </p>
          <dd id="smenu1" onblur="show('');" onmouseover="show('smenu1');" onfocus="show('smenu1');" onmouseout="show('');"> 
	<ol>
	   <li> <a href="#">S-Rub1-1</a></li>
	   <li> <a href="#">S-Rub1-2</a></li>
	   <li> <a href="#">S-Rub1-3</a></li>
	   <li> <a href="#">S-Rub1-4</a></li>
	</ol>
          </dd>
      </dl>
		
      <dl>
	<p id="menu2">
                <dt onblur="show('');" onmouseover="show('');" onfocus="show('');" onmouseout="show('');">
		<a href="javascript:;">	Rub2 </a>
	    </dt>
	</p>
	<dd id="smenu2" onblur="show('');" onmouseover="show('smenu2');" onfocus="show('smenu2');" onmouseout="show('');"> 
	    <ol>
		<li> <a href="#">S-Rub2-1</a></li>
		<li> <a href="#">S-Rub2-2</a></li>
		<li> <a href="#">S-Rub2-3</a></li>
	    </ol>
	</dd>
         </dl>
		
          <dl>
	<p id="menu3"> 
	   <dt onblur="show('');" onmouseover="show('');" onfocus="show('');" onmouseout="show('');">
	          <a href="javascript:;">	Rub3 </a>
	    </dt>
	</p>
	<dd id="smenu3" onblur="show('');" onmouseover="show('smenu3');" onfocus="show('smenu3');" onmouseout="show('');"> 
	    <ol>
		<li><a href="#">S-Rub3-1</a></li>
		<li><a href="#">S-Rub3-2</a></li>
		<li><a href="#">S-Rub3-3</a></li>
		<li><a href="#">S-Rub3-4</a></li>
		<li><a href="#">S-Rub3-5</a></li>
	   </ol>
	</dd>
          </dl>
		
           <dl>
	 <p id="menu4"> 
	     <dt onblur="show('');" onmouseover="show('smenu4');" onfocus="show('smenu4');" onmouseout="show('');">
		<a href="javascript:;">	 Rub4 </a>
	      </dt>
	  </p>
        	<dd id="smenu4" onblur="show('');" onmouseover="show('smenu4');" onfocus="show('smenu4');" onmou?????seout="show('');"> 
	  <ol>
		<li><a href="#">S-Rub4-1</a></li>
		<li><a href="#">S-Rub4-2</a></li>
	  </ol>
            </dd>
         </dl>
	
         <dl>
	<p id="menu5">
	   <dt onmouseover="show();" onfocus="show();">
                     <a href="#">	Rub5 </a>
                </dt>
	</p>
         </dl>
		
</div>

Mon code CSS :

dl, dt, dd, ol, li {
	text-align:justify;
	list-style-type: none;
	margin-bottom:0px;
}
#menu dl {
	float:left;
	font-size:14px;
	font-weight:bold;
	margin-right:45px;
}
html>body #menu dt {
	margin-top:-8px;
}
html>body #menu dd {
	margin-top:-5px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	margin-top:20px;
}
#menu dd {
	font-size:12px;
	position:absolute;
	float:left;
	display:none;
	border:1px solid #FFFFFF;
	border-top:0 none;
	background-color:#000000;
	font-weight:normal;
	top:72px;
	padding-top:10px;
	padding-left:7px;
	padding-bottom:10px;
	z-index:2;
}
#smenu4 {
	width:105px;
	margin-left:-3px;
}
#smenu1 {
	width:155px;
	margin-left:-25px;
}
#smenu2 {
	width:125px;
	margin-left:-48px;
}
#smenu3 {
	width:105px;
	margin-left:-40px;
}
#menu li a, #menu dt a {
	color: #FFFFFF;
	text-decoration:none;
	border: 0 none;
}

Et mon script :

window.onload=show;
function show(idDiv){
	var d = document.getElementById(idDiv);
		for (var i = 1; i<=4; i++) {
			if (document.getElementById('smenu'+i)) {
				document.getElementById('smenu'+i).style.display='none';
			}
		}
	if (d) {d.style.display='block';}
}

Quelqu'un a-t-il une expliation et une solution à mon pb ?

Merci d'avance.