Menú desplegable

Parte de la sección Frontend Práctico 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 de 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 de forma predeterminada.
Las opciones se vuelvan visibles cuando el usuario pase el cursor sobre el contenedor del menú desplegable.

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>