Menus déroulants

La section est basée sur l'article par Marc Hertzog.

• Des menus déroulants sont souvent réalisés avec javascript
• On peut les faire uniquement avec CSS
• Nous allons nous limiter aux deux niveaux de menus. Le menu principal sera :
  

        <ul>
          <li><a href="#">Cocktails</a></li>
          <li><a href="#">Soupes</a></li>
          <li><a href="#">Entrées</a></li>
          <li><a href="#">Desserts</a></li>
        </ul>

  Au deuxième niveau, nous ajoutons plusieurs éléments :

        <ul>
          <li>
            <a href="#">Cocktails</a>
              <ul>
                <li><a href="#">Cosmopolitan</a></li>
                <li><a href="#">Margarita</a></li>
                <li><a href="#">Mojito</a></li>
                <li><a href="#">Pina colada</a></li>
              </ul>
            </li>
          <li>
            <a href="#">Soupes</a>
              <ul>
                <li><a href="#">Gaspacho</a></li>
                <li><a href="#">Bouillon</a></li>
                <li><a href="#">Bisque de homard</a></li>
                <li><a href="#">Soupe à l'oignon</a></li>
              </ul>
            </li>
          <li>
            <a href="#">Entrées</a>
              <ul>
                <li><a href="#">Cuisses de canard laquées à l'érable</a></li>
                <li><a href="#">Poulet fourré au couscous</a></li>
                <li><a href="#">Tajine aux pruneaux</a></li>
              </ul>
            </li>
          <li>
            <a href="#">Desserts</a>
              <ul>
                <li><a href="#">Chocolat chaud à la cannelle</a></li>
                <li><a href="#">Salade de fruits</a></li>
                <li><a href="#">Thé à la menthe</a></li>
                <li><a href="#">Tiramisu</a></li>
              </ul>
            </li>
        </ul>

• Nous utiliserons deux classes de style : menu pour le premier niveau et sousMenu pour le deuxième niveau.
• Les éléments li de premier niveau seront affichés horizontalement et les éléments li de deuxième niveau seront affichés verticalement.
• Nous utiliserons la propriété float pour afficher le premier niveau horizontalement.

  .menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .menu li {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
  }

• Pour empêcher les éléments des sous-menus de flotter, nous utiliserons la valeur none pour la propriété float. Nous devons aussi faire disparaître l'affichage des éléments des sous-menus.

  .sousMenu {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sousMenu li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 159px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  }

• Les éléments de menu, lorsqu'ils sont visibles, s'afficheront comme des blocs (display: block).
• Nous utilisons une image d'arrière-plan et une image transparente pour les éléments de deuxième niveau lorsqu'ils sont visibles.

  .menu li a:link, .menu li a:visited {
    display: block;
    height: 1%; /* IE7 */
    color: white;
    background: #3E4E7E;
    margin: 0;
    padding: 4px 6px 4px 4px;
    border-right: 1px solid white;
    text-decoration: none;
  }
  .menu li a:hover {
    background-color: tomato;
  }
  .menu li a:active {
    background-color: cadetblue;
  }
  .sousMenu li a:link, .sousMenu li a:visited {
    display: block;
    color: white;
    margin: 0;
    border: 0;
    text-decoration: none;
    background: transparent url("fondLi.png") repeat;
  }
  .sousMenu li a:hover {
    background-image: none;
    background-color: tomato;
  }
  .menu li:hover .sousMenu {
    display: block;
  }

• L'affichage et le fichier css