Muestre un div al pasar el mouse por un elemento diferente y ciérrelo si el puntero del mouse se mueve fuera del div que se acaba de mostrar: jquery, megamenu

Estoy tratando de crear un mega menú y me gustaríapara mostrarlo justo al pasar el mouse sobre una voz específica del menú. Una vez que se muestre el mega menú (div), me gustaría dar la posibilidad de permanecer en él con el mouse (puntero) y cerrarlo una vez que el puntero se haya movido fuera del div.

Este es mi menú:

Este es mi menú cuando se muestra el mega menú que se abre cuando se pasa por el enlace "proyecto":

En este momento, puedo mostrar el menú cuando reviso el enlace "proyectos" pero no sé cómo cerrarlo cuando muevo el mouse fuera del menú Mega (div)

Este es el código para mostrar el menú:

jQuery(document).ready(function(){
jQuery("#menu-item-15").hover(
function(){
jQuery("#mega-menu-projects").show();
}
);
});

Respuestas

Puedes usar mouseover

jQuery(document).ready(function(){
jQuery("#menu-item-15").mouseover(
function(){
jQuery("#mega-menu-projects").show();
}
);

jQuery("#menu-item-15").mouseout(
function(){
jQuery("#mega-menu-projects").hide();
}
);
});

https://api.jquery.com/mouseover/

Prueba esto (no probado)

jQuery(document).ready(function(){
jQuery( "#menu-item-15" ).mouseout(function() {
jQuery("#mega-menu-projects").hide();
})
.mouseover(function() {
jQuery("#mega-menu-projects").show();
});
});

Espero que te ayude