botones fuera de lugar

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

Tienes varios detalles innecesarios, que pueden estar causando el problema:

*Nota: tienes escrito "Margin" y es "margin" (siempre minusculas).

-Ambos divs no tienen posicionamiento, y aun asi le pones "top:40px;" y "top:65px;" respectivamente, eso no hace falta para nada, mas bien define una altura a cada div y los dejes que se ubique solos uno debajo del otro.
-El z-index esta de sobra, segun veo no necesitas poner esos divs encima de ninguna otra cosa, por lo tanto no hace falta.
-si los botones van alineados a la derecha, debes poner al <ul> un "float:right;" ademas de ponerle un ancho fijo, de la suma del ancho de los botones + margin + padding, y dejar los botones en "float:left;" porque si no se invierten en el orden.

Con eso te deberia funcionar.

nota: z-index sólo funciona cuando los elementos tienen atributo de position:absolute

Gracias comienzo con los cambios, en breve les aviso.

Ha quedado mas o menos así, despues de haberle sacado un boton innecesario:



Como verán ahora mi problema es centrar la <div> azul entre los laterales rojos. Como lo indica la figura. Resalté como lo veo al <div> azul en el dreamweaver.

El código luego de unos retoques quedó algo así:

Código :

#botones {text-align:center;}
#navi { list-style:none;margin:0;padding:0;float:right;width:500px;}
#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;}
#navi2 { list-style:none;margin:0;padding:0;float:right; width:500px;}
#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;}

Que podría hacer para centrar los botones??

Gracias de Antemano

ponle al div un ancho de 320px mas o menos (que quepan los botones) y le pones margin:auto;

OK Gracias

!EXELENTE¡
Gracias Ramm y Fael...