CSS

Menu et Navigation

Menu déroulant en pur CSS

Un simple menu principal déroulant avec un niveau de sous-menu sans Javascript.

<style>
  .menu {
    width:100%;
    background: #555;
    display: inline-block;
    min-width: 640px;
  }
  .menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu ul li {
    display: block;
    position: relative;
    float: left;
  }
  .menu .droite {
    float: right;
  }
  .menu li ul {
    display: none;
    min-width: 150px;
  }
  .menu ul li a {   
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 10px;
    background: #555;
    white-space: nowrap;
  }
  .menu ul li a:hover {
    background: #999;
  }
  .menu li:hover ul {
    /* Ici l’affichage du sous-menu */
    display: block;
    position: absolute;
  }
  .menu li:hover li {
    float: none;
  }
  .menu li:hover a {
    background: #999;
  } 
  .menu li:hover li a:hover {
    background: #555;
  }​
</style>

<nav role="navigation" class="menu">
  <ul>
    <li><a href="#0">Acceil</a></li>
    <li><a href="#0">Produits</a>
      <ul>
        <li><a href="#0">Liste des produits</a></li>
        <li><a href="#0">Votre panier</a></li>
        <li><a href="#0">Votre compte</a></li>
      </ul>
    </li>
    <li><a href="#0">Partenaires</a>
      <ul>
        <li><a href="#0">Liste des partenaires</a></li>
        <li><a href="#0">Devenez partenaire</a></li>
        <li><a href="#0">Événements</a></li>
        <li><a href="#0">FAQ</a></li>
      </ul>
    </li>
    <li><a href="#0">Recherche</a></li>
    <li><a href="#0">À propos</a></li>
    <li class="droite"><a href="#0">Nous joindre</a></li>
  </ul>​
</nav>