Afficher le sous-menu

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 18 sur 43.

Défi

Facile

Maintenant que votre sous-menu est ajouté, vous avez probablement remarqué qu'il n'a pas une apparence idéale — il est visible en permanence, et la mise en page n'est pas celle que nous souhaitons.

Dans cette leçon, vous allez écrire du CSS pour masquer le sous-menu par défaut et le faire apparaître au survol, tout comme un véritable menu déroulant. Vous ajouterez également quelques styles simples pour le rendre plus propre.

Masquer le sous-menu par défaut
Utilisez la propriété display: none; sur .submenu.
Afficher le sous-menu au survol
Utilisez le sélecteur .has-submenu:hover .submenu et définissez display: block;.
Positionner le sous-menu sous l'élément parent
Définissez position: absolute; sur .submenu.
Assurez-vous que .has-submenu a position: relative; pour que cela fonctionne.
Styler le sous-menu pour une meilleure apparence

Définissez une couleur d'arrière-plan
Supprimez les styles de liste par défaut avec list-style: none;
Ajoutez de l'espacement à l'intérieur de chaque élément en utilisant padding: 10px;
Ajoutez une largeur appropriée

N'hésitez pas à tout personnaliser — couleurs, polices, bordures — appropriez-vous le design !

Essayez vous-même

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