SlideLeft animación error

[Krato]

Hola a todos. Estoy creando un menu y quiero conseguir lo siguiente:

Es un menú que está escondido como muestra la siguiente imagen:




La estructura la tengo de la siguiente manera:

Código HTML:

 <ul id="menu_cat">
		<li id="1"><img src="1.png" /></li>
		<li id="2"><img src="1.png" /></li>
		<li id="3"><img src="1.png" /></li>
		<li id="4"><img src="1.png" /></li>
		<li id="5"><img src="1.png" /></li>
    </ul> 

Y quiero que cada vez que pase sobre un "li", este, se desplace hacia la izquierda.
Pero tengo un problema, y es que en vez de desplazarse solo el elemento sobe el que estoy se desplazan todos los "li".

Estoy trabajando con jQuery y este es el código que estoy usando:

Código jQuery:

<script language="javascript" type="text/javascript">
$(document).ready(function() {                             
        $('li').hover( 
            function() {    
            var elemento = $(this)
                elemento.animate({marginRight: '100'});
            },
            function() {
                var elemento = $(this)
               elemento.animate({marginRight: '0'});
        });
});
 </script>
 

¿Alguna ayuda?

Muchas gracias.

[GatorV]

Tema trasladado desde AJAX.