Consulta sencilla

[lepe]

Hola buenas

Tengo un menu dropdown en el que aparece una cuadro para logearse. Al hacer hover sobre el boton se abre el dropdwon inferior (box), hasta ahí ok, el problema es que cuando aparto el cursor del boton y dropdown inferior no desaparece el dropdown (box), necesito hacer click para que desaparezca y me gustaría que desapareciese al apartar el cursor.

Actualmente está la funcion "Active" y me gustaría cambiarla por la función "Hover"
No tengo ningún conocimiento de JS, intenté modificar la función "active" por "hover" pero solo se conseguian cambios en el "button" y no en el "box"
El código en cuestión es este:

Código:

$(document).ready(function() {
$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
	
	button.mouseover(function(){
		box.show();
		if(!button.hasClass('active'))
			button.toggleClass('active');
	});
	
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
    $(this).mouseup(function(login) {
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

	$("#signin").validate();
});

Saludos y gracias