Mostrar el submenú

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 18 de 43.

Desafío

Fácil

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

En esta lección, escribirás CSS para ocultar el submenú de forma predeterminada y hacer que aparezca al pasar el cursor por encima, como en un menú desplegable real. También añadirás algunos estilos sencillos para que tenga un aspecto más limpio.

Ocultar el submenú de forma predeterminada
Usa la propiedad display: none; en .submenu.
Mostrar el submenú al pasar el cursor por encima
Usa el selector .has-submenu:hover .submenu y establece display: block;.
Colocar el submenú debajo del elemento principal
Establece position: absolute; en .submenu.
Asegúrate de que .has-submenu tenga position: relative; para que funcione.
Estilizar el submenú para mejorar su apariencia

Establece un color de fondo
Elimina los estilos de lista no predeterminados con list-style: none;
Añade espacio dentro de cada elemento usando padding: 10px;
Añade un ancho adecuado

¡No dudes en personalizar cualquier cosa: colores, fuentes, bordes; hazlo 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>