Tengo un problema, y estoy tratando de agregar un efecto de jQuery a un menú. ¿Que es lo que estoy haciendo mal?.
 
 El menú es este.  
Código:
 <div id="cabezal">
	<div class="contenedorcabezal">
    	<div class="logotipo">
        </div>
        <div class="menu">
        	<ul>
            	<li class="apa"><a href="#">Inicio</a></li>
                <li class="apa"><a href="#">Nosotros</a></li>
                <li class="apa"><a href="#">Modelos</a></li>
                <li class="apa"><a href="#">Servicios</a></li>
                <li class="apa"><a href="#">Contacto</a></li>
                </ul>
        </div><!--Menú-->
    </div><!--Contenedor Cabezal-->
</div><!--Cabezal-->
  Y tengo este jQuery que le estoy tratando de aplicar, pero no funciona:  
Código:
 $(function () {
	$('.apa').hover(function(){
		$(this).stop().animate({ 'top': '5px'},100);
	}, function() {
		$(this).stop().animate({ 'top': '0px'},100);
	});
});
  También lo puse de esta forma, pero sigue sin funcionar  
Código:
 $(function () {
	$('.apa').hover(function(){
		$(this).children('a').stop().animate({ 'top': '5px'},100);
	}, function() {
		$(this).children('a').stop().animate({ 'top': '0px'},100);
	});
});
  Segun yo estoy accediendo correctamente al DOM, entonces no se que sea lo que esta fallando.