Menu déroulant CSS - Thelia avec template Majenta

Bonjour,

Je fais un appel aux généreux développeurs CSS pour m'aider à avoir un menu déroulant avec le template Majenta de Thélia.
Historique de ma demande : http://thelia.net/forum/viewtopic.php?id=8638

En résumé, j'arrive maintenant à afficher mon menu de niveau 1 et à accéder aux éléments du niveau 2 mais j'aimerai maintenant que le niveau 2 s'affiche en dessous du niveau 1 lorsque qu'on survol un élément du menu de niveau 1.

Pour être concret : http://www.lanavertigo.com/shop/ actuellement les mots en bleu correspond au niveau 2 du menu "Mariage" et j'aimerai qu'ils s'affichent en dessous.

Si quelqu'un avait la générosité de m'aider, qu'il n'hésite pas en me fournissant le bloc CSS qui va bien...

Merci d'avance.

Bonjour,

J'avance petit à petit en suivant un tuto.
Il ne me reste plus qu'à afficher le sous menu uniquement lorsqu'on survole le menu principal.
Je sais qu'il faut utiliser la propriété hover et display none mais je n'y arrive pas.
Est ce quelqu'un peut jeter un oeil sur ma page via Firebug : http://www.lanavertigo.com/shop/?fond=produit&id_produit=7&id_rubrique=1
Je suis sûr que vous trouverez la solution en moins de 2 mn

Merci d'avance pour votre générosité.

Mon bout de code HTML :

a écrit :
<div class="menu-principal">
<div class="bouton-menu"><a href="?fond=index">ACCUEIL</a></div>
<div class="sep"></div>
<div class="bouton-menu" style="background-image: url(&quot;http://www.lanavertigo.com/shop/template/img/bouton-menu.jpg&quot;); background-color: inherit;"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=1" style="color: rgb(51, 51, 51);">MARIAGE</a>
<ul class="menux">
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=5">Faire-part</a></li>
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=6">Menu</a></li>
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=7">Carte de Remerciement</a></li>
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=8">Anniversaire de Mariage</a></li>
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=9">Livret de messe</a></li>
<li class="sousmenu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=10">Marque-place</a></li>
</ul>
</div>
<div class="sep"></div>
<div class="bouton-menu" style="background-image: url(&quot;http://www.lanavertigo.com/shop/template/img/bouton-menu.jpg&quot;); background-color: inherit;"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=3" style="color: rgb(51, 51, 51);">NAISSANCE</a>
</div>
<div class="sep"></div>
<div class="bouton-menu"><a href="http://www.lanavertigo.com/shop/?fond=rubrique&amp;id_rubrique=4">DIVERS</a>
</div>
<div class="sep"></div>
<!-- <div class="bouton-menu"><a href="?fond=contact">CONTACT</a></div>-->
</div>

Mon bout de code CSS :

a écrit :
.menux {
width: 100px;
position: absolute; z-index: 4;
margin: 0 -17px;
}

.menux ul {
padding: 0;
width: 100px;
border:1px solid;
margin:0px;
position: absolute;
top: 0;
}

.menux li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}
.menux li a {
text-decoration: none; /* plus de soulignement pour les liens */
}

.menux li.sousmenu {
background: grey;
}
.menux li.sousmenu:hover {
background: #EBB;
}

Actuellement le menu reste afficher car je n'ai pas positionner de display:none


Pouvez vous m'aider en m'indiquant les lignes à ajouter/modifier dans le CSS ?

Vous pouvez également jeter un oeil en ligne : http://www.lanavertigo.com/shop/?fond=index

Merci d'avance.