Les Styles CSS

Pour commencer, nous allons utiliser les styles CSS pour rendre le menu un peu plus sexy. Voici les styles utilisés dans l'exemple :

.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #000;
      color: #fff;
      width: 200px;
      font: 1.2em "Trebuchet MS", sans-serif;
      }
   .navigation a, .navigation span {
      display: block;
      padding: 4px 10px;
      color: #fff;
      text-decoration: none;
      background: #000 url(menu-item.png) left bottom no-repeat;
      }
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
      background-image: url(menu-item-deroule.png);
      }
   .navigation .open a, .navigation .open span {
      background-image: url(menu-item-enroule.png);
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .8em;
      background: #ccc url(subMenu.png) 0 0 repeat-x;
      font-size: .9em;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #666;
      }
   .navigation ul.subMenu a {
      background: none;
      padding: 3px 20px;
      }

Hop, c'est déjà nettement plus agréable à regarder, pas vrai ? Évidemment, il reste quelques bugs à corriger sous IE6 et consorts, mais ce n'est pas l'objet de ce tutoriel ... débrouillez-vous ;)

Et si vous voulez savoir à quoi sert la classe "open", continuez à lire !