Alors celui là il va faire des heureux et des heureuses ! Le menu que je vais vous donner est celui qui est ici même sur blogtuto. Vous avez les sous menus et regardez à "abonnement" vous avez des sous sous menus pour le flux. Bon c'est pour la démo hein ? Mais j'ai battaillé pour en trouver un qui fonctionne alors allons y gaiment !

Le tuto s'installe en deux parties :

- une dans le css dans "design"
- et une dans un module libre dans "configurer"

Je vais y aller pas à pas afin de pas perdre de cyberquiches en route.
Je vous conseille avant toute chose de faire une copie des parties de css que vous allez tripatouiller ça m'évitera de jouer aux pompiers ensuite.

1 - Pour commencer vous allez dans Design

2 vous allez dans Mode avancé (css)


3 - Vous choisissez "Mon style" 

4 - là deux possibilité

•  soit vous n'avez jamais cliquez sur définitions avancées et vous allez coller le script dans la seule fenêtre ouverte "Définitions d'affichages basiques"
• soit vous avez ouvert les autres volets et dans ce cas vous allez coller le script dans définitons de la structure de variation dans

dans les deux cas on colle tout en bas à la suite.

5 - le script le voilà :

<!-- menu-->
#nav, #nav ul {
    float: left;
    width: 1000em;
    list-style: none;
    line-height: 1;
    background: white;
    font-weight: bold;
    padding: 0;
    border: solid #eda;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

#nav a {
    display: block;
    width: 10em;
    w\idth: 9em;
    color: #D0F660;
    text-decoration: none;
    padding: 1em 0em;
}

#nav a.daddy {
    background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
    float: left;
    padding: 0;
    width: 9em;
}

#nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 14.4em;
    w\idth: 13.9em;
    font-weight: normal;
    border-width: 0.25em;
    margin: 0;
}

#nav li li {
    padding-right: 1em;
    width: 13em
}

#nav li ul a {
    width: 13em;
    w\idth: 12em;
}

#nav li ul ul {
    margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav li:hover, #nav li.sfhover {
    background: #FF6600;
    width: 13em;
}

En jouant avec les couleurs et les tailles vous obtiendrez ce que vous voulez. Pour cela je vous laisse bidouiller ;-)
Bien sûr vous validez !!!

6 - vous allez installer le contenu de votre menu dans la partie configurer

Vous ajoutez un module libre (attention vous en avez 8 maxi de dispo) sous la bannière


7 - vous cliquez sur le petit marteau, puis dans la fenêtre sur HTML

8 - vous copiez le code suivant

<ul id="nav">
<li> <a href="http://www.votreadresse.com">case 1</a> </li> // exemple de cellule sans sous menu

<li> <a href="http://www.votreadresse.com">case 2</a>  // exemple de cellule avec sous menu
<ul>
<li> <a href="http://www.votreadresse.com">sous menus 1 de la case 2</a> </li>
<li> <a href="http://www.votreadresse.com">sous menus 2 de la case 2</a> </li>
<li> <a href="http://www.votreadresse.com">sous menus 3 de la case 2</a> </li>
</ul>
</li>

<li> <a href="http://www.votreadresse.com">case 3</a>  // exemple de cellule avec sous-sous menu
<ul>
<li> <a href="http://www.votreadresse.com">sous menu1 de la case 3</a>
<ul>
<li> <a href="http://www.votreadresse.com">Sous-sous menu 1 du sous menu 1 de la case 3</a> </li>
<li> <a href="http://www.votreadresse.com">Sous-sous menu 2 du sous menu 1 de la case 3</a> </li>
</ul>
</li>
<li> <a href="http://www.votreadresse.com">Sous menu 2 de la case 3</a> </li>
</ul>
</li>
</ul>

En rouge c'est à supprimer en jaune à personnaliser  lors de l'installation. Bien sûr à vous de personaliser les intitulés que pour les besoins de l'exemple j'ai adpté pour éviter de vous perdre en route ;-)

Enjoy !