Un menu a tendine con i CSS

Mattepuffo's logo
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!


Condividi

6 Commenti

  • vito

    Grazie.sto sito web è il numero unoooooooooo

    15/05/2013
  • kristian

    LA PROCEDURA E' QUELLA DESCRITTA IN QUESTA PAGINA GRAZIE

    20/02/2013
  • kristian

    SALVE SCUSATE PER FAVORE CERCO QUALCUNO CHE MI AIUTI QUESTA PROCEDURA PER COSTRUIRE IL MENU A TENDINA CON I CSS VA BENE ANCHE PER INTERNET ESPLORER E MOZILLA FIREFOX E SE SI DESIDERA INSERIRLA IN UN SITO INTERNET ADATTANDOLA ALLE PROPIE ESIGENZE COSA ALTRO BISOGNA FARE GRAZIE.

    20/02/2013
  • Dorian

    Neanche a me funziona con IE, uso IE8 :sad:

    30/11/2012
  • fermat

    ciao!!<br />ad essere sincero non mi ricordo se ho fatto un test con tutti i browser.<br />che versione di IE stai usando??

    30/11/2012
  • Bertoldi

    ma non funziona con IE :(

    30/11/2012

Commentami!