JOOMLA + CSS Menú Horizontal

Hola! les escribo porque me estoy volviendo loco con una tontería. Yo he trabajado con CSS desde hace tiempo. Pero ahora estoy diseñando un sitio con JOOMLA y tengo problemas serios para hacer un menú horizontal con imagens y mouseover. Los CSS para el resto de la cosas los hice en 10 minutos pero hace más de una semana que no he podido hacer que funcione el maldito menu horizontal y estoy seguro que es una tontería.

Este es el sitio y el menu con problemas es el que está abajo de la imagen de la playa paradisiaca:
http://www.ecocircuitos.com/eng/index.php

Porfavor no me manden a ver el tutorial de CSS de cristalab porque mi problema no es como hacer un menu horizontal en CSS sino como hacer que JOOMLA aplique ese codigo a una determinada tabla.

Aquí lo declaré en el JOOMLA como -middle


Aquí un ejemplo de como quiero que se vea


Así es como se ve con el codigo actual


El codigo que estoy usando es este:
table.moduletable-middle {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
table.moduletable-middle ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
table.moduletable-middle li {
display:inline;
margin:0;
padding:0;
}
table.moduletable-middle a {
float:left;
background:url("../images/middle_left.jpg") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
table.moduletable-middle a span {
float:left;
display:block;
background:url("../images/middle_right.jpg") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
table.moduletable-middle a span {float:none;}
/* End IE5-Mac hack */
table.moduletable-middle a:hover span {
color:#FFF;
}
table.moduletable-middle a:hover {
background-position:0% -42px;
}
table.moduletable-middle a:hover span {
background-position:100% -42px;
}

Y aca pueden ver el codigo de arriba funcionando pero como CSS simple
http://exploding-boy.com/images/cssmenus/menus.html el que me gusta es el #tabsF en HTML si yo pongo #tabsF el HTML lo agarra del CSS pero en joomla al parecer necesita una nomenglatura distinta.

PORFAVOR!! AYUDA!!

Hola
Tienes unos errores en el CSS:
Esto no se hace:

Código :

table.moduletable-middle ul {
table.moduletable-middle li {
table.moduletable-middle a {

Deberia ser asi:

Código :

table.moduletable-middle ul {
table.moduletable-middle ul li {
table.moduletable-middle ul li a {

Lo otro es que veo unas cosas raras, le pones el float al <a> en vez d eponerselo al <li>, y usas un span en vez de usar una imagen de fondo para el <li> y la otra en el <a> directamente. Intenta eliminar ese span y hacerlo como en sliding doors