CSS: menu dropdown con effetti dinamici senza JavaScript

In questo articolo vedremo come creare un menu dropdown con effetti dinamici senza l'ausilio di JavaScript. Aggiungeremo un marcatore per segnalare la presenza del sottomenu e lo modificheremo quando l'utente passa con il mouse sulla voce attiva. Il tutto con i soli CSS.

Partiamo dalla seguente struttura HTML:

<ul id="navigation">
  <li class="sub"><a href="#">Nav 1</a>
          <ul class="sub-navigation">
                <li><a href="#">SubNav 1</a></li>
                <li><a href="#">SubNav 2</a></li>
                <li><a href="#">SubNav 3</a></li>
          </ul>
  </li>
  <li><a href="#">Nav 2</a></li>
  <li><a href="#">Nav 3</a></li>
  <li><a href="#">Nav 4</a></li>
</ul>​

Per prima cosa formattiamo il menu principale e il sottomenu:

#navigation {
    height: 2em;
    background: #333;
}

#navigation > li {
    float: left;
    height: 100%;
    margin-right: 0.5em;
    position: relative;
}

#navigation > li > a {
    float: left;
    height: 100%;
    line-height: 2;
    color: #ddd;
    text-decoration: none;
    padding: 0 1em;
}

#navigation > li > a:hover {
    background: #000;
    color: #fff;
}

#navigation ul.sub-navigation {
    width: 12em;
    background: #000;
    position: absolute;
    top: 2em;
    left: 0;
    display: none;
    z-index: 1000;
}

#navigation ul.sub-navigation li {
    display: block;
    margin-bottom: 0.4em;
}

#navigation ul.sub-navigation li:last-child {
    margin-bottom: 0;
}

#navigation ul.sub-navigation li a {
    display: block;
    padding: 0.4em 0.5em;
    color: #fff;
    text-decoration: none;
}

#navigation ul.sub-navigation li a:hover {
    background: #333;
    color: #ddd;
}

Il sottomenu è inizialmente nascosto. Per mostrarlo al passaggio del mouse aggiungiamo il seguente codice:

#navigation > li.sub:hover ul.sub-navigation {
    display: block;
}

Quindi usiamo il contenuto generato per creare il marcatore da aggiungere alla voce con il sottomenu:

#navigation > li.sub > a:after {
    content: '+';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    margin-left: 5px;
}

In pratica abbiamo creato un icona con un segno più. Ora cambiamo il segno più in meno quando l'utente apre il sottomenu:

#navigation > li.sub:hover > a:after {
    content: '-';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    margin-left: 5px;
}

Potete visionare l'esempio finale in questa pagina.