Ajouter le sous-menu

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

Défi

Facile

Dans ce mini-projet, vous allez construire un menu de navigation déroulant étape par étape. En partant d'une barre de navigation supérieure de base, vous ajouterez un sous-menu sous "Games" et le styliserez à l'aide de pseudo-classes CSS. Vous améliorerez également le design avec une barre de recherche et un bouton CTA, tout en apprenant des concepts clés du design web comme flexbox et les styles interactifs au passage.

Dans ce défi, vous commencerez à construire votre menu déroulant en ajoutant le sous-menu sous l'élément de menu "Games".

À l'intérieur du <li class="has-submenu"> pour "Games", ajoutez un nouveau <ul class="submenu">.
À l'intérieur du sous-menu, créez 3 nouveaux éléments <li> :
1. Board Games
2. Card Games
3. Video Games

À ce stade, concentrez-vous sur l'écriture de la structure HTML correcte — aucun style n'est encore nécessaire.

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