Mostrar el submenú

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 18 de 43.

Desafío

Fácil

Ahora que has añadido tu submenú, probablemente habrás notado que no se ve muy bien: es visible todo el tiempo y el diseño no es el que queremos.

En esta lección, escribirás CSS para ocultar el submenú por defecto y hacer que aparezca al pasar el ratón, como un menú desplegable real. También añadirás algunos estilos sencillos para que se vea más limpio.

Oculta el submenú por defecto
Usa la propiedad display: none; en .submenu.
Muestra el submenú al pasar el ratón (hover)
Usa el selector .has-submenu:hover .submenu y establece display: block;.
Posiciona el submenú debajo del elemento padre
Establece position: absolute; en .submenu.
Asegúrate de que .has-submenu tenga position: relative; para que funcione.
Estiliza el submenú para una mejor apariencia

Establece un color de fondo
Elimina los estilos de lista por defecto con list-style: none;
Añade espaciado dentro de cada elemento usando padding: 10px;
Añade un ancho apropiado

¡Siéntete libre de personalizar cualquier cosa (colores, fuentes, bordes) para hacerlo tuyo!

Pruébalo tú mismo

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>