Afficher le sous-menu

Fait partie de la section Maîtrise du CSS 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’est pas très esthétique. Il est visible en permanence et la mise en page ne correspond pas à ce 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, comme dans un véritable menu déroulant. Vous ajouterez également quelques styles simples pour lui donner une apparence plus soignée.

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 possède position: relative; pour que cela fonctionne.
Styliser le sous-menu pour une meilleure apparence

Définir une couleur d’arrière-plan
Supprimer les styles de liste par défaut avec list-style: none;
Ajouter de l’espace à l’intérieur de chaque élément avec padding: 10px;
Ajouter une largeur appropriée

N’hésitez pas à tout personnaliser : couleurs, polices, bordures… Faites-en votre propre création !

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>