// JavaScript DocumentEste es el código de jQuery a añadir en nuestro documento para que funcione la animación:

$(document).ready(function() {
    $("#topnav li").prepend("<span></span>");

    //Crear un espacio vacío antes de la etiqueta  COMENTARIO LINEA SIMPLE

    $("#topnav li").each(function() {

    //Por cada item
  var linkText = $(this).find("a").html();

    //Encontrar el texto denteo de la etiqueta <a>
  $(this).find("span").show().html(linkText);

    //Agregar el texto a la etiqueta span
});

$("#topnav li").hover(function() {

/*En el hover (cuando el puntero del mouse se posiciona por encima)...
COMENTARIO MULTI LINEAS
COMENTARIO MULTI LINEAS
COMENTARIO MULTI LINEAS
*/

$(this).find("span").stop().animate({
        marginTop: "-40" //Encontrar la etiqueta <span>  y moverla 40 px hacia arriba.
        }, 250);

    } , function() { //Cuando se quita (retira o mueve) el puntero del mouse...
        $(this).find("span").stop().animate({

        marginTop: "0"  //Mover la etiqueta <span>devuelta a la posición original (0px)
    }, 250);

    });
});