CSS Menú Horizontal

Hola señores...estoy diseñando un sitio con JOOMLA y estoy teniendo problemas para hacer una menú horizontal. Por alguna razón se ve cortado y no al tamaño de cada imagen que debería ser 99 pixeles de ancho. Ya intenté ponerle el ancho entodos lados y nada....

Este es mi sitio...lo que quiero arreglar es el menú verde que está abajo de la imágen de playa
http://www.ecocircuitos.com/eng/index.php?option=com_content&task=blogcategory&id=0&Itemid=56

ALguién tiene algún codigo de menú horizontal en JOOMLA?? o sabe como arreglar este??

table.moduletable-middle {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
/* border-bottom: solid 1px #FFFFFF; */
}

table.moduletable-middle td {
width: 101px;
height: 25px;
padding-left: 0px;
text-align: Center;
font-size: 10px;
}

a.mainlevel-middle:link, a.mainlevel-middle:visited {
width: 100%;
display: table-cell;
width: 101px;
height: 25px;
line-height: 25px !important;
line-height: 22px;
background: url(../images/middle.jpg) no-repeat;
background-position: 0px -1px;
padding-left: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
text-align: center;
}

a.mainlevel-middle:hover {
background-position: 0px -27px;
text-decoration: none;
color: #FFFFFF;
}

Creo que estas un poco pèrdido en el espacio

Checa esto
http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css

Y esto
http://www.cristalab.com/tutoriales/130/crear-menus-de-navegacion-en-css-usando-listas

Tambien puedes poner un link a lo que haces para verlo en accion, y ver que es lo que pasa

El link lo puse arriba... he podido hacer todo menos eso. De igual forma lo pongo nuevamente.
http://www.ecocircuitos.com/eng/index.php?option=com_content&task=blogcategory&id=0&Itemid=56

Oye pero entonces ya lo arreglaste? no veo el error Yo veo un menú horizontal, tu quieres que sea desplegable? o algo por el estilo?

Al parecer los errores son de dimensiones en lo ancho, segun lo que yo entendí.

El error si es ese (lo vi con Firefox) es minimo, aunque puede que sea también por el tamaño de la letra.

Claro! en firefox el error es minimo...pero en IE es un asco nisiquiera parece una menú.... no se entiende nada.

RAMM me leí el segundo tutorial y tengo una pregunta solamente: En el ejemplo de menú horizontal de CSS
usan #navi {

Entonces que tendría que poner en el CSS del modulo del joomla para q vea ese CSS determinado??
#navi ?? -navi?? navi?? porq ningúna de las anteriores me funciona.

Para los otros menús me funciona por ejemplo -nombre...pero este no sabría como incorporarlo.

---------------------------------------------
Y otra cosa es que en Firefox la imagen de los submenus los mueve un toque a la derecha y yo quiero que esten todo alineados y solo diferenciarlos con el diseño de la imagen y no el alineamiento

Código :

<ul id="navi"> 
   <li>inicio</li>
   <li>acerca de</li>
   <li>contactos</li>
</ul>
<!--agregamos un ID para referirnos directamente a esta lista.-->

Navi puedes cambiarlo por cualquier otro nombre, sólo es para referenciarlo.

La100rra el tema es que yo lo necesito para JOOMLA. EJ. Que pongo en el modulo del JOOMLA para q vea ese codigo CSS?
Mira aca un ejemplo de a que me refiero:
http://www.ecocircuitos.com/img/ej.jpg

Aca está como se ve en Internet Explorer
http://www.ecocircuitos.com/img/ie.jpg

Y aca está lo de los bordes de los submenus que quiere eliminar para q esten alineados.
http://www.ecocircuitos.com/img/bd.jpg


#navi li a {
display:block;
width:100px;
padding:40px 10px 4px 10px;
text-decoration:none;
text-align:right;
font-size:11px;
color:#666666;
background-image:url(images/boton1.png); //Aqui solo se ve la parte de arriba de la imagen
border:1px solid #666666;
}
#navi li a:hover {
color:#000000;
background-position:bottom; //Aqui muestro la parte de abajo de la imagen
}