Pour cela, il faut tout d'abord aller dans le factory puis dans votre projet pour aller configurer la navigation, et ici, on pourra noter l'apparition d'une nouvelle case à cocher « menu toujours déplié ». Cette dernière permet de faire apparaître tout les niveaux et sous niveaux d'un menu, sans avoir besoin de cliquer sur un item du menu pour faire apparaître les sous item de ce menu. Mais aussi subtil que cela puisse paraître c'est grâce à cette case que l'on va pouvoir réaliser notre menu déroulant. Il ne faut pas oublier de sélectionner le type de menu vertical dans le factory, car un menu de type vertical est en réalité un menu à listes imbriqués, ce qui est indispensable pour réaliser un menu déroulant. menu depilié Voici de façon simplifié la structure html dont on a besoin:

<ul id="first_level">
      <li>
            <a href="#">libelle</a>
            <ul class="second_level">
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
            </ul>
      </li>
      <li><a href="#">libelle</a></li>
      <li><a href="#">libelle</a></li>
</ul>

Toute première chose à faire, avant de commencer à donner une apparence à notre menu, il faut masquer les seconds niveaux de notre arborescence. On va éviter l'utilisation de la propriété display:none; qui pose quelques soucis avec certains navigateurs non graphiques.

ul#first_level li ul{
      position:absolute;
      left:-999em;
}

Une fois que cette étape est faite, il en reste plus qu'a habiller notre menu, et à gérer la réaction au survol pour afficher les seconds niveaux de liste qu'on a masqués auparavant. Pour faire cela, on va utiliser la pseudo classe :hover non pas sur un lien comme on a l'habitude de le faire, mais sur nos éléments de liste (<li>...</li>), jusqu'ici fantastique, cela fonctionne me direz-vous mais en plus cela fonctionne sans javascript

ul#first_level li:hover ul {
        left: auto;
}

Malheureusement Internet Explorer ne comprend cette pseudo-classe :hover que sur les liens. C'est pourquoi nous avons avoir besoin malgré tout de javascript pour IE.

sfHover = function() {
        var sfEls = document.getElementById("first_level").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

En gros, ce code va appliquer la classe "sfhover" aux items ("li") de la liste ("ul") nommée ("id") "first_level", lorsque ces items sont survolés par la souris. Cette classe est ensuite retirée en utilisant une expression régulière lorsque la souris quitte la zone. Donc, du coup le style devient :

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

Cet article s'inspire de l'excellent pompage.net et de son article sur les menus déroulant