Menú desplegable

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 20 de 35.

Un menú desplegable es un elemento de navegación que muestra más enlaces cuando el usuario pasa el cursor sobre él o pone el foco en él. Aunque los menús desplegables se pueden crear usando JavaScript, en este capítulo nos centramos en un enfoque basado solo en CSS, que utiliza :hover o :focus-within para revelar el menú oculto.

Por qué usarlos:

Ahorra espacio en las barras de navegación.
Mantiene la interfaz limpia y organizada.
Funciona bien para diseños mobile-first y responsivos cuando se adapta adecuadamente.

HTML:

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS:

//El .dropdown tiene position: relative 
//para que el contenido del menú desplegable se pueda posicionar correctamente con position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//El .dropdown-content está oculto por defecto usando display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//Cuando el usuario pasa el cursor sobre el contenedor .dropdown, 
//el .dropdown-content se muestra usando display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

Con este código, cuando pases el cursor sobre el contenedor del menú desplegable (incluyendo el botón), aparecerá el contenido del menú desplegable.

Desafío

Fácil

Se te proporciona el HTML para un menú desplegable con un botón etiquetado como "Select Color" y tres opciones: Red, Green, Blue.

Tu tarea es aplicar estilos al menú desplegable con CSS para que:

Las opciones estén ocultas por defecto.
Las opciones se vuelvan visibles cuando el usuario pase el cursor sobre el contenedor del menú desplegable.

Hoja de referencia

Un menú desplegable muestra más enlaces cuando el usuario pasa el cursor sobre él o se enfoca en él. Usa :hover o :focus-within para revelar el menú oculto.

Estructura HTML:

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Implementación CSS:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

El contenedor del menú desplegable utiliza position: relative para que el contenido del menú desplegable pueda posicionarse con position: absolute. El contenido está oculto por defecto con display: none y se muestra al pasar el cursor con display: block.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>