$(document).ready(function(){
 
    $("ul.submenu").parent().append("<span></span>");
	
	$("ul.menu li").hover(function() { //Al hacer click se ejecuta...
 
        //Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
        $(this).find("ul.submenu").slideDown().show(); //Menu desplegable al hacer click
 
        $(this).hover(function() {}, function() {
            $(this).parent().find("ul.submenu").slideUp(200); //Ocultamos el submenu cuando el raton sale fuera del submenu
        });
 
       
    });
 
	$("ul.menu li span").hover(function() { //Al hacer click se ejecuta...
 
        //Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
        $(this).parent().find("ul.submenu").slideDown().show(); //Menu desplegable al hacer click
 
        $(this).parent().hover(function() {}, function() {
            $(this).parent().find("ul.submenu").slideUp(); //Ocultamos el submenu cuando el raton sale fuera del submenu
        });
 
        }).hover(function() {
            $(this).addClass("subhover"); //Agregamos la clase subhover
        }, function(){  //Cunado sale el cursor, sacamos la clase
            $(this).removeClass("subhover");
    });
 
});