Bonsoir,
On peut imaginer une solution à base de marges négatives. Cela reste relativement simple et la plupart des navigateurs le comprennent. J'ai mis un exemple à cette adresse :
http://www.floatthatbox.com/divers/menuLiensImbriques/
Premièrement, on part d'une structure assez classique pour un menu, avec une liste non ordonnée :
<ul>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="item3"><a href="#">Item 3</a></li>
</ul>
Pour cet exemple, j'ai choisi pour simplifier de remplacer les textes par des images ayant toutes la même taille. Pour que la chose soit plus efficace, j'utilise aussi une seule image (voir le tuto :
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique). Il est aussi possible d'utiliser de simple backgrounds avec un texte HTML non remplacé, mais ce sera plus complexe !
Sinon, voici la CSS :
ul {
margin:0; padding:0;
list-style:none;
}
li, li a {
width:224px;
float:left;
}
li a {
padding-top:30px;
height:0 !important; height /**/:30px;
position:relative;/*IE*/
overflow:hidden;
background:url(menu.gif) no-repeat 0 0;
}
#item2 a {
margin-left:-22px;
background-position:-202px 0;
}
#item3 a {
margin-left:-44px;
background-position:-404px 0;
}
li a:hover {z-index:1;}/*Passage au 1er plan en hover*/
#item1 a:hover {background-position:0 -30px;}
#item2 a:hover {background-position:-202px -60px;}
#item3 a:hover {background-position:-404px -90px;}
/*Clearing*/
ul:after {
display:block;
height:0;
clear:both;
visibility:hidden;
content:".";
}
/*IE7*/
ul {display:inline-block;}
ul {display:block;}
/*IE<7*/
* html ul {height:0;}
Avant de commencer, il est important de noter le "position:relative" appliqué à "li a", pour qu'IE se comporte correctement.
On utilise donc des marges négatives, ici sur #item2 et #item3 pour que les liens viennent s'imbriquer : si aucun lien n'est survolé, on a #item3 au-dessus de #item2 lui-même au-dessus de #item1. En hover, il suffit alors de faire passer le lien survolé par dessus les autres, en affectant un simple "z-index:1". Pour le reste, il ne s'agit que de positionnement du background utilisé...
Juste un mot aussi sur la technique de remplacement d'image utilisée ici et qui nécessite un hack pour fonctionner sur IE5, d'où le très laid :
height:0 !important; height /**/:30px;
Il peut être bon de séparer ces hacks utiles à IE dans une autre feuille de style...
Un petit mot enfin sur la partie "clearing" : bien que non nécessaire sur ce simple exemple, ce serait probablement utile sur un vrai site pour couper les floattants (li et a). La méthode utilisé ici est le "easy clearing", qui permet de ne pas utiliser de balisage supplémentaire, et dont une description détaillée est donnée sur
http://www.positioniseverything.net/easyclearing.html . C'est relativement complexe (notamment car il faut prendre en compte les manques d'IE et ses comprtements différents suivant les versions), mais très pratique...
Pour terminer, ce menu semble fonctionner sur IE5+, Firefox1+, Safari1.3+ et Opera9
. 
