Creer Menu Vertical, help

[Zoulinou]

Bonjour a tous

je souhaiterai créer ceci:


Vous pouvez voir l'animation verticale , ici:
http://www.mandchou.com/mB/#

CSS de base:

Code:

ul.onglets-vert { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; width:100px;}
ul.onglets-vert li { margin:0; padding:0; list-style:none; border:1px solid #999; margin:0 1px;}
ul.onglets-vert li a { display:block; background:#333; color:#FFF; text-decoration:none; padding:3px 6px; border:2px solid #FFF; font-size:12px; text-transform:uppercase; font-weight:bold;}
ul.onglets-vert li a:hover { background:#800;}

ul.onglets-vert li ul {  margin:0; padding:0 0 0 0; margin:-20px 0 0 0; }
ul.onglets-vert li ul li { float:none;  border:0; border-bottom:1px solid #FFF;}
ul.onglets-vert li ul li a { display:block; background:#BBB; color:#000; border:0; text-transform:none; font-weight:bold;}
ul.onglets-vert li ul li a:hover { background:#09b9eb;}



ul.onglets-vert li ul li ul {  padding:0 0 0 0; }
ul.onglets-vert li ul li ul li{ float:none;  border:0;  border-bottom:1px solid #BBB;}
ul.onglets-vert li ul li ul li a { display:block; background:#FAFAFA; color:#666; border:0; text-transform:none; font-weight:bold;}
ul.onglets-vert li ul li ul li a:hover { background:#EEE;}

html de base:

Code:

<ul class="onglets-vert mB2">

<li><a href="#">Rubrique 1</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.157726;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00935367;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00134276;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 2</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.131951;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 3</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 1;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 4</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.108153;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00221902;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 5</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 1;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
</ul>

Script 1 et deux sont en bas ce cette page:
http://www.mandchou.com/mB/#

Alors j'ai le menu principal qui s'affiche
mais pas les sous menus au passage de la souris...

Je suis ouvert a tout autre code que celui ci si vous avez qq chose qui fonctionne.


merci beaucoup

[Lorris]

Bonjour,
Je vous conseille ce tutoriel.
Cordialement

[Zoulinou]

Bonjour Lorris

je l'ai deja essayé et il fonctionne
mais son mode d'ouverture ne me convient pas...
je souhaite que se soit latéral pour les sous menus

Cordialement


Edit :

je viens de trouver mon bonheur ici:
http://css.developpez.com/galerie/?page=menus-verticaux


cordialement