Exibir o submenu

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

Desafio

Fácil

Agora que seu submenu foi adicionado, você provavelmente percebeu que ele não está com uma aparência muito boa. Ele fica visível o tempo todo, e o layout não é o que queremos.

Nesta lição, você escreverá CSS para ocultar o submenu por padrão e fazê-lo aparecer ao passar o mouse, como em um menu suspenso real. Você também adicionará alguns estilos simples para deixá-lo mais organizado.

Oculte 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 isso funcione.
Estilize o submenu para melhorar sua aparência

Defina uma cor de fundo
Remova os estilos padrão da lista 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 tudo 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>