Menu déroulant CSS

Question

Essayez d'obtenir une liste déroulante "Pure CSS" essayé pendant des jours d'obtenir une navigation de menu déroulant CSS "simple" à fonctionner. Je peux afficher le niveau supérieur et masquer le deuxième niveau, mais je ne peux pas faire en sorte que les sous-éléments s'affichent au survol ?? Toute aide serait très appréciée. Exemple isolé ici:: CSS et HTML ci-dessous paste bin http://www.webdevout.net/test?01t

Answer 1

Vos problèmes sont probablement dus au fait que vous avez construit votre html de manière incorrecte. Le sous-menu (.level-two) doit être imbriqué dans les éléments .level-one li:

à propos
contact
abonner
Test1

    sous-page Test1

Test2

    sous-page Test2

Si vous utilisez ensuite le css suivant:

.level-one {affichage: en ligne; position: relative; }

.level-one {affichage: aucun; position: absolue; gauche: 0; haut: 1em; /* ajustez si nécessaire */ }

.level-one:hover .level-two {affichage: bloc; }

Je pense que cela devrait suffire pour commencer. N'hésitez pas à poser des questions dans les commentaires, ou à mettre à jour votre question.

Étant donné que je suppose que vous êtes assez nouveau dans ce domaine, je voudrais vous proposer les références suivantes:

• Pour tout ce qui est chic et merveilleux avec les menus CSS: CSS Play, par Stu Nicholls.
• Pour une introduction à certains des comment et pourquoi: A List Apart.
• Une brève introduction, de Eric Meyer.

Il y en a des dizaines, voire des centaines, à découvrir...

Answer 2

Le deuxième niveau de

doit être enfant, vous avez actuellement ceci :

Test2

 Testsubpage2    

Changez pour ceci :

Test2

  Testsubpage2

Answer 3

Voici le css avec lequel je suis plutôt content et qui implémente un menu déroulant à trois niveaux. Jusqu'à présent, testé uniquement sous FF :

/* Inséré par Tom Brander pour le menu imbriqué Permet trois niveaux.. le modèle peut être étendu si vous le souhaitez */
ul.level-one{
  margin-left:-10px; /* aligne le 1er élément avec la boîte de recherche */
}
ul.level-one li{
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  position: relative;
  line-height: 1.3em;
  }
ul.level-one li:hover {
  background:#999ca0;
  }
.level-two {
  display: none;
  position :absolute;
  left:0;
  top: 1em;
  }
.level-three {
  display: none;
  position :absolute;
  top: 0em;
  }
.level-one li:hover .level-two {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  }
.level-two li:hover .level-three {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  margin-left: 92px;  /* cela déplace le 3ème niveau vers la droite mais pas trop loin, besoin d'un chevauchement suffisant pour pouvoir déplacer la souris sans que le troisième niveau ne disparaisse */
  }
.level-three li:hover {display:block;}