Imagenes en li

[lissette22]

Hola,

Tengo un menu tal que:

<div id="menu">
<ul>
<li class="nivel1 activo" ><a id="activo" href="#">Inicio</a></li>
<li class="nivel1"><a href="#">¿Quienes somos?</a></li>
<li class="nivel1"><a href="#">Asociaci&oacute;n</a></li>
<li class="nivel1"><a href="#">Servicios</a></li>
<li class="nivel1"><a href="#">Hazte Socio</a></li>
<li class="nivel1"><a href="#">Noticias</a></li>
</ul>
</div> <!-- /menu principal -->

Y al primer li quiero ponerle una imagen se ajuste al texto? Ya que la priemra vez estará activo Inicio y si pasas el el ratón por encima se pondrán las otras activas con la misma imagen.

Muchas gracias por vuestra ayuda.

[omarMusic]

Una idea básica sería:

#menu ul {list-style-type: none; }
#menu li {margin: 0px; padding-left: 10px;}
#menu li:hover {background: url(imagen.png) left center no-repeat;}
#menu .activo{background: url(imagen.png) left center no-repeat;}

con una imagen pequeña claro, para la posición de la imagen solo habría que cambiar la posición en el background por ej. 'top center' pa q esta este arriba del enlace

[lissette22]

Gracias por tu ayuda, pero si la imagen está formada en dos partes,yo tengo esto(el menu configurado para que este en fila):

div#menu {
height:35px;
left:215px;
position:relative;
top:30px;
}
div#menu li a {
color:#000000;
height:35px;
line-height:35px;
text-decoration:none;
padding:10px 11px;
}

div#menu li.nivel1 {
margin-right:5px;
font-weight:bold;
}
div#menu li.activo {
background: url(imagenes/menu_tab_l.png) left center no-repeat;
}
div#menu li a#activo{
color:#AA1428;
background: url(imagenes/menu_tab_r.png)right center no-repeat;
}

y me queda la primera imagen que solo ocupa el sitio del li (más bajo) y la del a más alta. Si pongo en el li dispay:block me las pone en fila y yo las quiero in-line.
¿Como puedo hacer para que las imagenes coincidan y formen entre las 2 la imagen correcta?

Muchas gracias.

[omarMusic]

Intenta con esto

CSS:
#menu ul {list-style-type: none; }
#menu li {margin: 0px; padding-left: 10px;}
#menu li:hover {background: url(imagen.png) left center no-repeat;}
#menu li:hover label{background: url(imagen.png) right center no-repeat; padding-right: 20px;}
#menu .activo{background: url(imagen.png) left center no-repeat;}
#menu .activo label{background: url(imagen.png) right center no-repeat; padding-right: 20px;}

HTML:
<div id="menu">
<ul>
<li class="nivel1 activo" ><label><a id="activo" href="#">Inicio</a></label></li>
<li class="nivel1"><label><a href="#">¿Quienes somos?</a></label></li>
<li class="nivel1"><label><a href="#">Asociaci&oacute;n</a></label></li>
<li class="nivel1"><label><a href="#">Servicios</a></label></li>
<li class="nivel1"><label><a href="#">Hazte Socio</a></label></li>
<li class="nivel1"><label><a href="#">Noticias</a></label></li>
</ul>
</div>

Suerte!