Un menu a tendine con i CSS

In giro si trovano tantissimi tutorial e script per creare ottimi menu a tendina con Javascript e jQuery.

Non è detto però che si debba usare per forza JS o un derivato.

Per creare un semplice menu possiamo anche usare il semplice CSS.

Partiamo dalla struttura di base HTML:

<div id="menu">
<ul> <!-- MENU PRINCIPALE -->
   <li><a href="#">Voce 1</a>
      <ul> <!-- PRIMO SOTTOMENU -->
         <li><a href="#">Submenu 1</a></li>
         <li><a href="#">Submenu 1</a></li>
         <li><a href="#">Submenu 1</a></li>
         <li><a href="#">Submenu 1</a></li>
         <li><a href="#">Submenu 1</a></li>
      </ul> <!-- FINE PRIMO SOTTOMENU -->
    </li>

    <li><a href="#">Voce 2</a></li>

    <li><a href="#">Voce 3</a></li>

    <li><a href="#">Voce 4</a></li>

</ul>
</div>

Ho messo 4 voci di menu e un sottomenu alla prima voce.