[Ayuda] Item activo del menu (jquery)

[x7uk]

Hola! Estoy desarrollando un pequeño sitio web haciendo uso de tecnologias 2.0 para aprender un poco y me topé con este pequeño problema!

Tengo esta lista html:

Código (html4strict) [Seleccionar] Expandir


<div id="menu_lateral" class="menu_lateral">
               
      <ul>

               <li class="current"><a href="#">Item 1</a></li>
               <li><a href="#">Item 2</a></li>
               <li><a href="#">Item 3</a></li>
               <li><a href="#">Item 4</a></li>
               <li><a href="#">Item 5</a></li>
               
      </ul>
               
</div>


Luego dentro del CSS la clase current:

Código (css) [Seleccionar] Expandir


.current{
   background-color:blue;
}


Y el JQuery:

Código (javascript) [Seleccionar] Expandir


function main(){
  $('li').click(addrem_class);
}

function addrem_class(){
        $(this).addClass('current').siblings().removeClass('current');
}

var d = $(document);
d.ready(main);


Bien! esto funciona! cuando selecciono, por ejemplo, el item 3 se pone con fondo azul y automaticamente el item 1 (que viene seleccionado x default) se le va el fondo (queda normal). Si paso a otro item se pondra azul y el item anteriormente seleccionado vuelve a la normalidad, es decir, solo se mantiene con fondo azul el item activo.
El problema surge ahora cuando en vez de ponerle fondo azul a los items activos quiero poner un pequeño icono a su izquierda, precisamente este:



Intente en el CSS:

Código (css) [Seleccionar] Expandir

.current{
background-image:url('icono_menu.png');
}

Pero no aparece nada :/ ¿como puedo hacer?

Gracias de ante mano!

[#!drvy]

Tal y como lo pones debería funcionar. Ten en cuenta que background-image no añade una imagen sino que la pone de fondo, así que asegúrate de que sobrescribes el fondo con alguna otra propiedad.

También asegurarte de poner la ruta correcta hacia la imagen.


Saludos