Cuando haces hover en algun item, primero debes hacer desaparecer todos los demas y solamente activas el actual.
Con jquery seria algo asi:
function clearPopUps(){
$('#popmenu-item-0').css('display', 'none');
$('#popmenu-item-1').css('display', 'none');
$('#popmenu-item-2').css('display', 'none');
$('#popmenu-item-3').css('display', 'none');
$('#popmenu-item-4').css('display', 'none');
}
$('.popup-menu').hover(function() {
clearPopUps(); //<<<<<<<<<<<<<<******************
$('#popmenu-item-' + $(this).attr('data-target')).css('display', 'block');
$('.popup-menu-item').css('display', 'block');
}, function() {
$('.popup-menu-item').css('display', 'none');
});
$('.popup-menu-item').hover(function() {
$('.popup-menu-item').css('display', 'block');
}, function() {
$('.popup-menu-item').css('display', 'none');
});
$(window).scroll(function(){
clearPopUps();
});
.popup-menu es un ul/li que tiene la lista de los menus.
Cada li tiene un atributo data-target que apunta al popup-menu-item que se quiere mostrar.
El window.scroll es para que cuando se haga el scroll los popups desaparezcan, de lo contrario en una tablet van a estar alli forever.
Saludos.