// JavaScript Document

$(document).ready(function() {  
  
$("#topnav li").prepend("<span></span>");  
  
//Crear un espacio vacío antes de la etiqueta  
  
$("#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)...  
  
$(this).find("span").stop().animate({  
  
marginTop: "-66" //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);  
  
});  
  
});