[Resolvido] Problema com menu em CSS, para Joomla

Olá,

Estou com um problema aqui com CSS que já está me dando nos nervos. U.U'

Tenho o seguinte problema:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.cobraesf.com.br/templates/cobraesf/demo.jpg&key=0962ef59b0f3cfdc860df50eef759b75733451e7bd9013919166ae7ee26704b7" alt="Imagem Postada" />

Como vocês podem ver, estava querendo fazer um menu bem diferente no CSS. O meu problema é que não consigo resolver o problema do houver. Nessa caso eu estaria dando 2 hover's de uma vez só, porém se eu passa o mouse pelo lado esquerdo, o hover será feito só na

ul li a:hover. Já indo pela classe "active", consigo da o hover nos dois como podem ver na imagem.

Esse é o código:

#menu{width:951px; height:51px; background:url(../images/bg-menu.jpg) repeat-x left center; float:right; margin:99px 0 0 0; border-left:1px solid #e8e9eb; border-right:1px solid #e8e9eb;}
#menu ul{margin:-6px 0 0 33px; background:#f1f1f1;}
#menu ul li{list-style-type:none; display:inline-block; float:left; margin:0 28px 0 0; text-align:center;}

#menu ul li a{text-decoration:none; color:#006699;color:#fff; display:block; background:url(../images/moldura-left.png) no-repeat top left; padding:0px 0px 0px 19px; text-align:center;}

#menu ul li a:hover{background:url(../images/moldura-left.png) no-repeat bottom left; padding:0px 0px 0px 19px;}

#menu span{display:block; background:url(../images/moldura-right.png) no-repeat top right; padding:20px 17px 15px 0;}
#menu span:hover{background:url(../images/moldura-right.png) no-repeat bottom right; padding:20px 17px 15px 0;}Nesse código, eu ainda estava tentando resolver com o uso do span. Estou sem o código com active. fail :/

Essa é a maneira mais correta que eu consigo fazer com o CSS?

No site " www.cobraesf.com.br " você poderá ver como ficou.

Valeu :lol:

Editado:

Resolvi o problema dessa seguinte maneira:

#menu{width:951px; height:51px; background:url(../images/bg-menu.jpg) repeat-x left center; float:right; margin:99px 0 0 0; border-left:1px solid #e8e9eb; border-right:1px solid #e8e9eb;}
#menu ul{margin:-6px 0 0 0px; }
#menu ul li{ float:left; text-align:center; width:106px; list-style:none; margin-right:5px;}
#menu ul li a{text-decoration:none; display:block; color:#006699; background:url(../images/menu.png) no-repeat bottom center;padding:17px 0; font-weight:700;}
#menu ul li a:hover{color:#fff; background:url(../images/menu.png) no-repeat top center; font-weight:normal;}
.active {background:url(../images/menu.png) no-repeat top center; font-weight:normal}
.active span {color:#fff;}