Home / Programmazione / HTML - CSS / Un menu a tendine con i CSS
Mattepuffo

Un menu a tendine con i CSS

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.

 

A questo punto passiamo al CSS:

#menu {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  border-top: 1px solid black;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu li {
  width:100px;
  float:left;
  margin: 0;
  padding: 0;
}

#menu a {
  display: block;
  padding: 5px;
  color: #000;
  text-decoration: none;
}
#menu a:hover {
  background-color: #000033;
  color: #FFFFFF;
  text-decoration: none;
}

#menu li ul { /* NASCONDO I SOTTOMENU */

 display: none

}

#menu li:hover ul { /* MOSTRO IL SOTTOMENU AL PASSAGGIO DEL MOUSE */
  display: block;
  position: absolute;
  z-index:1;
  width:150px;
  padding: 0;
  margin: 0 0 0 -1px;
  border:1px solid black;
  background: white;
}

/* UN PO' DI SITLE PER I LINK */

#menu li li {

 border: none;

 width: 150px;

}

#menu li li a {

 padding: 2px 2px 2px 10px;

}

Il CSS è un pò lungo ma abbastanza semplice.

Prima ci sono le regole per il div che contiene il menu e per le voci fisse.

Poi le regole per i menu a comparsa.

Non tutto è obbligatorio; alcune cose sono per migliorare un pò la visualizzazione.

Enjoy!