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 lo enfoca. Aunque los menús desplegables se pueden crear con JavaScript, en este capítulo nos centramos en un enfoque que solo usa CSS, que utiliza :hover o :focus-within para mostrar el menú oculto.

Por qué usarlos:

Ahorra espacio en las barras de navegación.
Mantiene la interfaz limpia y organizada.
Funciona bien en diseños adaptados primero a móviles y responsivos, cuando se adapta correctamente.

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:

//The .dropdown is position: relative 
//so the dropdown content can be positioned correctly with position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//The .dropdown-content is hidden by default using display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//When the user hovers over the .dropdown container, 
//the .dropdown-content is shown using display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

Con este código, al pasar el cursor sobre el contenedor desplegable (incluido el botón), aparecerá el contenido 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 dar estilo 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>