Bonsoir,
le html me semble correct. Pourrais-tu me montrer ton javascript ? Je ne peux pas t'aider si je ne l'ai pas.

Bonjour et merci :)

En fait, je ne sais pas du tout quoi ajouter pour avoir un "sous-sous-menu". Par exemple lorsque je pointe sur "Lien1" un autre sous-menu s'affiche. J'ai essayer plusieurs choses sans succès.

------------------------------

Voilà le javascript :

window.onload=montre();
var timer;
function montre(id) {
window.clearTimeout(timer);
var d = document.getElementById(id);
for (var i = 1; i<=20; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block'; timer=window.setTimeout("montre()", 10000);}
}

------------------------------

Et le CSS :

#menu {
position:absolute;
top:0px;
left:0px;
margin:0;
padding:0;
display:block;
}
#menu .titre-rubrique {
margin:0 0 1px 1px;
padding:0;
width:222px;
display:block;
text-align:left;
}
.rubriques {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;

}



.rubriques li a.btn1 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;

font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;

text-transform:uppercase;
background-image:url(_images/menu/btn1.gif);
background-repeat:no-repeat;
background-position:top center;
}
.rubriques li a.btn2 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;

font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;

text-transform:uppercase;
background-image:url(_images/menu/btn2.gif);
background-repeat:no-repeat;
background-position:top center;
}

.rubriques li a:hover.btn1 {
height:27px;
overflow:hidden;

font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;

background-image:url(_images/menu/btn1_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}
.rubriques li a:hover.btn2 {
height:27px;
overflow:hidden;

font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;

background-image:url(_images/menu/btn2_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}


.rubriques li div {
position:relative;
top:0;
left:0;
padding:0;
}

.rubriques div {
position:absolute;
}

.rubriques ul {
position:absolute;
top:-32px;
left:190px;
margin:0;
padding:0;
border-bottom:1px solid #142D35;
}


.rubriques div a, .rubriques div a:visited{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;

font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
background-image:url(_images/menu/fd_s-bouton.png);
background-repeat:repeat;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
border-left:4px solid #142D35;
}

html>body .rubriques div a {
margin-bottom:-1px;
}

.rubriques div a:hover{
color:#142D35;
text-decoration:none;
background-color:#FFF;
background-image:none;
filter: Alpha(Opacity=100);
border:1px solid #142D35;
border-left:4px solid #000000;
}

.rubriques li a.titre, .rubriques li a:visited.titre{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;

font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
text-align:center;
background-color: #142D35;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
}

Ixion,
je vais te proposer une solution bricolée à partir de tes codes. Mais pour plus de souplesse, il faudrait créer une fonction javascript qui soit plus adaptée au multi-niveaux, comme celle du site que tu sites en exemple.
Reste à l'écoute.

Merci Rad Zone ! Je n'ai pas encore eu le temps de tester, mais ces menus ont l'air très intéressants. Je m'y mets tout de suite.

Groarh avait aussi une proposition, je peux essayer les deux pour voir.

@+ et merci :)

Ixion,
quand j'ai vu la rapidité avec laquelle Rad Zone a posté une solution, j'ai laissé tomber de mon côté, désolé.

Je viens relancer ce sujet, car je m'intéresse aux scripts qui peuvent nous permettre de faire des menu dans le genre des menus verticaus de rocketThems pour joomla.
avez vous une idée ?

Merci

Pour ce qui est de la structure, c'est très simple ! Il suffit de faire des listes dans des listes dans une liste ! ^^
Pour la suite, css pour la mise en forme et javascript (jquery powa) pour l'animation (slide, fade, etc...)...

Info pour le type de structure:
<ul>
<li>menu sans sous-menu</li>
<li>menu avec sous-menu
<ul>
<li>sous-menu</li>
</ul>
</li>
</ul>

pour le css et je javascript c'est à chacun de voir, ce n'est pas très compliqué sauf pour la compatibilité multi browser... auquel cas je conseil une détection du browser et un css spécifique. Au pire des cas... des hack css !

Bon travail ! :D
[Monkey Monk]
That's all folks !

Sé-man-ti-que !