Exibir o submenu

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 18 de 43.

Desafio

Fácil

Agora que seu submenu foi adicionado, você provavelmente notou que ele não parece muito bom — ele está visível o tempo todo e o layout não é o que queremos.

Nesta lição, você escreverá CSS para esconder o submenu por padrão e fazê-lo aparecer ao passar o mouse, exatamente como um menu suspenso real. Você também adicionará alguns estilos simples para deixá-lo com uma aparência mais limpa.

Esconda o submenu por padrão
Use a propriedade display: none; em .submenu.
Mostre o submenu ao passar o mouse
Use o seletor .has-submenu:hover .submenu e defina display: block;.
Posicione o submenu abaixo do item pai
Defina position: absolute; em .submenu.
Certifique-se de que .has-submenu tenha position: relative; para que funcione.
Estilize o submenu para uma melhor aparência

Defina uma cor de fundo
Remova os estilos de lista padrão com list-style: none;
Adicione espaçamento dentro de cada item usando padding: 10px;
Adicione uma largura apropriada

Sinta-se à vontade para personalizar qualquer coisa — cores, fontes, bordas — deixe-o com a sua cara!

Experimente você mesmo

<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>