Voici quelque chose de très simple à commencer.

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

MODIFIER

Mettre en œuvre ce que j'ai appris de @sushil bharwani. Voici comment j'ai trouvé l'URL ci-dessus, à la courtoisie de @sushil bharwani http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

Vous n'avez pas besoin d'utiliser JavaScript (sauf si vous voulez une compatibilité avec les navigateurs obsolètes), vous pouvez le réaliser avec HTML + CSS seul. Et d'une manière beaucoup plus sémantiquement correcte. 🙂

Vous pouvez faire des menus déroulants verticaux ou des menus horizontaux (exemple plus joli) en utilisant les techniques expliquées dans l'article Sons of Suckerfish chez HTMLDog.
Simple et significatif.

Échantillon

Voici un exemple simple. En cela, vous pouvez voir la fonctionnalité de survol fonctionnant parfaitement.

Le CSS n'est pas bon, car ce n'est qu'un échantillon.
Pour travailler sur le style, désactivez l' display: none; Ligne: cela empêchera les sous-menus de se cacher lorsqu'ils ne planteront pas, et vous pourrez travailler sur le style de tout.
Une fois que vous avez terminé, réactivez simplement l' display: none; Ligne pour que les sous-menus se cachent et ne s'affichent que sur le vol stationnaire.

HTML

 <nav> <p>Collapsing:</p> <ul class="collapsable"> <li>a<ul> <li>a1 <li>a2 </ul> <li>b<ul> <li>b1 </ul> </ul> <p>Not collapsing:</p> <ul> <li>a<ul> <li>a1 <li>a2 </ul> <li>b<ul> <li>b1 </ul> </ul> </nav> 

CSS

 nav li:hover { background: #EEEEEE; } nav li>ul { display: inline-block; margin: 0; padding: 0; } nav .collapsable li>ul { display: none; } nav li>ul::before { content: ": { "; } nav li>ul::after { content: " } "; } nav li:hover>ul { display: inline-block; } nav li>ul>li { display: inline-block; } nav li>ul>li+li::before { content: ", "; } 

Voici un jsfiddle: http://jsfiddle.net/x8dxv/

Avec un peu de javascript et une connaissance autour de CSS, vous pouvez convertir une liste UL LI simple en un arbre de menu. Il est juste que vous puissiez utiliser jQuery si vous le comprenez.

Vous pouvez affiner votre recherche google par arborescence de menus en utilisant UL Li. Ou CSS pour convertir UL LI en arbre.

Les menus de navigation sont principalement créés en utilisant une combinaison de UL et de LI.

 <UL id="Menu"> <LI>Home</LI> <LI>Links</LI> </UL> 

Et vous pouvez insérer UL dans l'élément LI et ainsi obtenir une structure arborescente pour la navigation.

Hmm … je ne suis pas sûr de savoir quel est votre problème.

Jusqu'à présent, avec html, vous pouvez structurer les listes en utilisant des combinaisons de li-tag ulted. Tandis que ul lance une liste et li un élément de liste. Il est permis d'utiliser une étiquette ul à l'intérieur d'une étiquette li …

Voici une façon simple de le faire si vous ne voulez pas en écrire un.

http://www.mycssmenu.com/#css-menu-demo

Vous voudrez peut-être examiner certains des outils en ligne qui créent le menu pour vous. Par exemple, Générateur de menu CSS

Vous pouvez utiliser JavaScript pour générer le menu – par exemple, regardez le plugin jQuery – Menu tree .

Je ne sais pas si vous trouverez votre réponse, mais voici une liste avec plusieurs types de menus verticaux http://css.maxdesign.com.au/listamatic2/index.htm aucun javascript n'est impliqué dans ces exemples