[Résolu] Double rollover / Afficher-Masquer des éléments

Bonjour à tous et à toutes !
Je cherche à réaliser en CSS (uniquement) un effet d'hover particulier. Seulement là je m'emmèle les pinceaux devant la difficulté à structurer ce que je veux faire, dont voici le topo :
J'aimerais créer 2 "menus" horizontaux, l'un sous l'autre et dont un seul possède des liens actifs (et pour faire compliquer, celui du dessous tant qu'à faire). Les menus ont chacun un état avec et sans hover, et lorsqu'on passe la souris sur le 1er élément du menu en bas, le 1er élément du menu
en haut réagit et change d'état. J'espère que vous suivez et d'avance désolé si je ne m'exprime peut-être pas assez clairement. Une image pour mieux saisir peut-être :

Voilà pour le topo, maintenant ce serait très sympa si vous aviez un tuyau quant à la méthode qui vous semblerait le plus à même de parvenir à cette fin, et m'indiquer un ou des tutoriels abordant le sujet, je vous en serais très reconnaissant ! Sur ce, merci beaucoup de votre patience (pour m'avoir lu jusqu'au bout déjà !)


Voilà.
Modifié par didli (17 Nov 2007 - 17:01)

Bon, il me fallait donc un effet de réactivité homogène entre deux menus (constitués d'images exclusivement) placés l'un sous l'autre. Je me suis servi d'un tuto présenté ici-même Un menu avec commentaires au survol.
Le résultat peut-être vu ici : http://mediaklan.homelinux.com/work/

Le code xHtml (pour un élément de menu) :

<ul class="navig">
   <li><a class="web" href="#"><span class="webd"></span></a></li>
</ul>

Le code CSS :

ul      {
        list-style-type: none;
        width: 854px;
        height: 295px;
        margin-left: auto;
	margin-right: auto;
	margin-top: 141px;
        padding:0px;
	background-color: #5B553D;
        color: black;
        }           
   
li      {
        float: left;
        display: block;
	      }
	 
.navig a.web {
   	width: 231px;
   	height: 295px;
        float: left;
        display: block;
        background-image: url(../work/img/mk_web_noh.jpg);
   	background-color: #5B553D;
	color: black;
        }	    
				
.navig a.web:hover {
        background-image: url(../work/img/mk_web_h.jpg);
				}		
				
span.webd   {
        position: absolute;
        top: 149px;
        left: 50%;
        margin-left: -173px;
        width: 94px;
        height: 141px;
        background-image: url(../work/img/thumb-web_noh.jpg);
        background-color: #5B553D;
	color: black;
        }	 

a:hover span.webd   {
        background-image: url(../work/img/thumb-web_h.jpg);
        }

Le résultat semble valide xhtml et CSS, même si je ne suis pas sûr du tout que la plupart des navigateurs réagissent correctement (IE6 et Firefox semblent OK). Pas très à l'aise non plus avec les position: absolute; placés sur chaque élément span (j'ai essayé de les placer correctement en float mais rien à faire).
Voilà c'est tout ! En espérant que cela aide quelqu'un qui souhaite un effet similaire...
Modifié par didli (17 Nov 2007 - 12:49)