ayuda con el fondo del boton de mi menu

[Masticore]

Hola a todos.. necesito ayuda por fa
les explico..
tengo el siguiente menu - este se despliega para abajo.. y al elegir un item queda con una boton amarillo
este es el codigo q ocupa

#horiz-menu li.active,
#horiz-menu li.level1:hover#current {
background: transparent url('../images/style1/menu_h_l.png') no-repeat 0 50%!important;
}
#horiz-menu li.active a,
#horiz-menu li#current.level1:hover a {
background: transparent url('../images/style1/menu_h_r.png') no-repeat 100% 50%;
}
#horiz-menu li.level1:hover {
background: url('../images/style1/menu_l.png') no-repeat 0 50%!important;
}
#horiz-menu li.level1:hover a.level1 {
background: url('../images/style1/menu_r.png') no-repeat 100% 50%;
color: #ffcc33;
}
#horiz-menu li li a:hover,
#horiz-menu li li.sfhover a:hover {
color: #ffcc33!important;

asi es..

y yo quiero colocar este menu. q es en forma horizontal los submenus pero no he podido agregarle el fondo del boton aqui les dejo la foto



este es el codigo Q ESTADO MODIFICANDO.. ya le deje el color y al pasar encima queda amariilo pero no logro dejar elboton detras..

div.menuContainer
{
background-color: #ffffff;
padding: 0px;
margin: 0px;
border-top: 1px solid #272727;
border-bottom: 1px solid #272727;
border-right: 1px solid #272727;
opacity: 0;
filter: alpha(opacity = 0);
}

div.horizontalMenuContainer, div.verticalMenuContainer, div.sub-horizontalMenuContainer, div.sub-verticalMenuContainer, div.sub-singleMenuContainer
{
background-color: #272727;
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
filter: alpha(opacity = 0);
z-index: 100;
}

ul.horizontalMenuContainer, ul.verticalMenuContainer, ul.singleMenuContainer
{
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
}

ul.horizontalMenuContainer
{
border-left: 1px solid #272727;
border-bottom: 1px solid #272727;
border-top: 1px solid #272727;
border-right: 1px solid #272727;
}

ul.verticalMenuContainer
{
border-left: 1px solid #272727;
border-right: 1px solid #272727;
border-bottom: 1px solid #272727;
}

ul.singleMenuContainer
{
border-left: 1px solid #272727;
border-right: 1px solid #272727;
border-top: 1px solid #272727;
border-bottom: 1px solid #272727;
float: left;
}

ul.singleMenuContainer ul.singleMenuContainer
{
border: 0px;
}

#menuContainer li.horizontalMenuItem
{

float: left;
display: inline;
}

#menuContainer li.verticalMenuItem
{
float: none;
display: block;
clear: both;
}

#menuContainer li.singleMenuItem
{
font-weight: bold;
display: inline;
float: left;
}

#menuContainer li.singleMenuItem li.singleMenuItem
{
font-weight: normal;
display: block;
clear: both;
}

a.horizontalMenuItemText, a.verticalMenuItemText, a.singleMenuItemText
{
/* We need the background color here for IE7. If not, the links do not fill horizontally and MouseOver fires */
background-color: #272727;
margin: 0px;
padding: 5px;
text-decoration: none;
color: #FFCB41;
display: block;
}

a.horizontalMenuItemText
{
border-right: 1px solid #272727;
border-left: 1px solid #272727;
}

a.verticalMenuItemText
{
border-bottom: 1px solid #272727;
border-top: 1px solid #272727;
}

a.singleMenuItemText
{
}

ojala me puedan ayudar y decirme q me falta

gracias

[cristian_cena]

te estas olvidando de incluir la imagen, background-image:url(ruta/carpeta/imagen.png);

Recuerda que si incluyes la imagen de fondo dentro de la etiqueta <a> tienes de darle display:block; (ej: a {display:block;}) para transformarla en bloque y poder darle altura (ej: height:25px;)

con lo que mas o menos te quedaría:

a{
display:block;
width:ancho de la imagen;
height:alto de la imagen;
background-image:url(ruta/carpeta/imagen.png);
/*y luego con line-height:; manipulas la posicion del texto del enlace*/
/*si quieres trabajar con sprites entonces utiliza background-position:; y luego top-right-bottom-left para darle las coordenadas de posición*/
}

Espero te sirva, saludos

[Masticore]

GRACIAS.. PERO YA LOGRE QUE FUNCIONE PERO ME FALTA UNA COSA..
TE EXPLICO.. YO NECESITO QUE AL HACER CLICK EN ALGUNA OPCION DEL MENU QUEDE MARCADO CON EL BOTON AMARILLO (LA IMAGEN ) Y QUEDE SELECIONADO CUANDO BAJE A LOS SUB MENU OSEA QUE QUEDE ACTIVO. PERO NO ME FUNCIONA .. ME QUEDA AMARILLO EL BOTON PERO DESAPARECE INMEDIATAMENTE.. OJALA ME PUEDES AYUDAR Y DECIRME Q ME FALTA O SI ESTOY OCUPANDO MAL EL ACTIVE.. GRACIASSSSS
AQUI DEJO EL CODIGO

a.horizontalMenuItemText, a.verticalMenuItemText, a.singleMenuItemText
{
color: #fff !important;
font: bold;
}
a.horizontalMenuItemText:hover {
color:#FFCB41 !important;
}
a.horizontalMenuItemTextli:active {
background: transparent url('../images/style1/menu_h_l.png') no-repeat 0 50%!important;
color:#000 !important;
}
a.horizontalMenuItemText:active {
background: transparent url('../images/style1/menu_h_r.png') no-repeat 100% 50%!important;
color:#000 !important;
}
a.horizontalMenuItemTextli:hover {
background: url('../images/style1/menu_l.png') no-repeat 0 50%!important;
}
a.horizontalMenuItemText:hover {
background: url('../images/style1/menu_r.png') no-repeat 100% 50%;
}

[cristian_cena]

Hay trucos para dejar un link activo con css pero yo lo que hago es utilizar javascript. si te interesa esta forma te subo un ejemplo a mediafire para que lo veas.

[jomaruro]

Hola:

Échale un vistazo a este ejemplo del maestro Mikmoro, quizá te sea útil.

Saludos.