Problema con botones

[RazorBuzz]

Tengo el siguiente problema:
He creado una lista y la convertí en botonera. Pero los botones se mueven hacia abajo en NETSCAPE Y FIREFOX, en cambio en IE y Opera todo bien. Y me gustaría que vuelvan al lugar como indican las flechas rojas.



Este es el html:

Código:

 
<ul id="navi">
  <li><a href="#"><span title="bla bla">Teor&iacute;a</span></a></li>
  <li><a href="#"><span title="ma bla bla">Guía de Ejercicios</span></a></li>
  <li><a href="#"><span title="y bla bla">Programas</span></a></li>
  </ul></div>
  		<div id="botones2">
   <ul id="navi2">
  <li><a href="#"><span title="mi mi">Cronograma</span></a></li>
  <li><a href="#"><span title="Desgargar Guía de Laboratorio">Guía de Laboratorio</span></a></li>
  <li><a href="#"><span title="Descargar ficha personal del alumno">Ficha</span></a></li>
  <li><a href="#"><span title="Applet interactivo">Applet</span></a></li>
  </ul></div>

Y el CSS

Código:

#botones {text-align:center;margin-left:60px;top: 40px;z-index: 5;}
#navi { 
	list-style:none;
	Margin:0;
	padding:0;}
#navi li {
	margin:2px;
	padding:2px;
	border:1px solid #CCCCCC;
	float:left;
}
#navi li a {
	display:block;
	width:100px;
	padding:4px 0;
	text-decoration:none;
	text-align:center;
	font-size:9px;
	color: #999999;
	background-color:#CCCCCC;
	border-left:10px solid #666666;
}
#navi li a:hover {
	color:#CCCCCC;
	background-color: #FFFFFF;
	border-left-color: #666666;
}
#botones2 {text-align:center;margin-left:120px;top: 65px;z-index: 5;}
#navi2 { 
	list-style:none;
	Margin:0;
	padding:0;
	}
#navi2 li {
	margin:2px;
	padding:2px;
	border:1px solid #CCCCCC;
	float:left;
}
#navi2 li a {
	display:block;
	width:100px;
	padding:4px 0;
	text-decoration:none;
	text-align:center;
	font-size:9px;
	color: #999999;
	background-color:#CCCCCC;
	border-left:10px solid #666666;
}
#navi2 li a:hover {
	color:#CCCCCC;
	background-color: #FFFFFF;
	border-left-color: #666666;
}

AGRADEZCO CUALQUIER COLABORACIÓN