¿Cómo crear: Menú desplegable

Aprenda a crear menús desplegables utilizando CSS.

Cree un menú desplegable suspendido

Cree un menú desplegable que se muestra cuando el usuario pasa el ratón sobre el elemento.

Paso 1 - Añadir HTML:

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

Ejemplo de explicación:

Puede usar cualquier elemento para abrir el menú desplegable, por ejemplo, elementos <button>, <a> o <p>.

Cree un menú desplegable utilizando un elemento de contenedor (como <div>) y agregue enlaces desplegables.

Utilice el elemento <div> para envolver el botón y otro <div> para que CSS pueda ubicar correctamente el menú desplegable.

Paso 2 - Añadir CSS:

/* Botón desplegable */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Contenedor <div> - utilizado para posicionar el contenido del menú desplegable */
.dropup {
  position: relative;
  display: inline-block;
}
/* Contenido del menú desplegable (oculto por defecto) */
.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;
}
/* Enlaces en el menú desplegable */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Cambie el color del enlace al pasar el ratón sobre él */
.dropup-content a:hover {background-color: #ddd}
/* Muestre el menú desplegable al pasar el ratón sobre él */
.dropup:hover .dropup-content {
  display: block;
}
/* Cambie el color de fondo del botón desplegable cuando se muestre el contenido del menú desplegable */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Pruebe usted mismo

Ejemplo de explicación:

Hemos establecido estilos como color de fondo, margen interno, etc. para el botón desplegable.

.dropup clase position:relativecuando queremos que el contenido del menú desplegable se coloque en la parte superior del botón desplegable (usando position:absolute），es obligatorio.

.dropup-content La clase contiene el menú desplegable real. Por defecto, está oculto y se mostrará al pasar el ratón sobre él (ver a continuación). Tenga en cuenta que el ancho mínimo se establece en 160px. Puede cambiar este valor según sea necesario. Sugerencia: si desea que el ancho del contenido del menú desplegable sea igual al del botón desplegable, puede establecer el ancho en 100% (y usar en pantallas pequeñas) overflow:auto para activar el desplazamiento).

No hemos utilizado bordes, sino box-shadow propiedad, para que el menú desplegable se vea como una tarjeta. Además, utilizamos z-index Coloque el menú desplegable delante de otros elementos.

:hover El selector se utiliza para mostrar el menú desplegable cuando el usuario pasa el ratón sobre el botón desplegable.