Menu desplegable con css y html

[WIитX]

Hola necesito vuestra ayuda  

Mirar estoy haciendo un menu en css y html desplegable que al pasar el cursor por encima del menu se despliegue la lista de sub-menus hasta ahí bien el problema llega esque quiero por ejemplo al pasar el raton por el menu de inicio se desplieguen todos los sub-menus de inicio, perfil, temas os dejo un pequeño gráfico la cuestión esque quiero que se bajen todos los desplegables al pasar el raton por uno de ellos lo quiero para introducirlo en un theme de wordpress esque por mas que miro no encuentro nada estoy intentando hacerlo pero no hay manera T.T''


| Inicio | | Perfil | | Temas || Descargas |
---------  --------
|Index1| |Perfil1|
|Index2| |Perfil2|

Muchas gracias!

[_Enko]

Cuando haces hover en algun item, primero debes hacer desaparecer todos los demas y solamente activas el actual.

Con jquery seria algo asi:

Código [Seleccionar] Expandir


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.

[WIитX]

Muchas gracias Enko probaré a ver que tal