Come creare: menu a discesa

Impara come creare menu a discesa utilizzando CSS.

Crea un menu a discesa hover

Crea un menu a discesa che viene visualizzato quando l'utente muove il mouse sopra un elemento.

Primo passo - Aggiungi HTML:

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Esempio di spiegazione:

Puoi aprire un menu a discesa utilizzando qualsiasi elemento, ad esempio <button>, <a> o l'elemento <p>.

Crea un menu a discesa utilizzando un elemento contenitore (come <div>) e aggiungi i link a discesa al suo interno.

Usa l'elemento <div> per avvolgere il pulsante e il <div> per posizionare correttamente il menu a discesa utilizzando CSS.

Secondo passo - Aggiungi CSS:

/* Bottone a discesa */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Contenitore <div> - utilizzato per posizionare gli elementi necessari per il contenuto del menu a scorrimento */
.dropup {
  position: relative;
  display: inline-block;
}
/* Contenuto del menu a scorrimento (nascosto per default) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Link nel menu a scorrimento */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Cambia il colore del link quando il mouse è sopra */
.dropup-content a:hover {background-color: #ddd}
/* Visualizza il menu a scorrimento quando il mouse è sopra */
.dropup:hover .dropup-content {
  display: block;
}
/* Cambia il colore di sfondo del pulsante a scorrimento quando il contenuto del menu a scorrimento è visibile */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Prova tu stesso

Esempio di spiegazione:

Abbiamo impostato lo stile di sfondo, il margine interno e altri stili per il pulsante a scorrimento.

.dropup la classe position:relativequando vogliamo posizionare il contenuto del menu a scorrimento sopra il pulsante a scorrimento (usando position:absolute)

.dropup-content La classe contiene il menu a scorrimento effettivo. Di default è nascosto e verrà visualizzato quando il mouse è sopra (vedi di seguito). Nota: la larghezza minima è impostata a 160px. Puoi modificare questo valore secondo necessità. Suggerimento: se desideri che la larghezza del contenuto del menu a scorrimento sia uguale a quella del pulsante a scorrimento, imposta la larghezza a 100% (e utilizza overflow:auto per abilitare lo scorrimento).

Non abbiamo utilizzato i bordi, ma abbiamo usato box-shadow proprietà, in modo che il menu a scorrimento sembri una carta. Utilizziamo anche z-index Metti il menu a scorrimento davanti ad altri elementi.

:hover Il selettore viene utilizzato per visualizzare il menu a discesa quando l'utente mette il mouse sopra il pulsante a scorrimento