Ajouter le sous-menu

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 17 sur 43.

Défi

Facile

Dans ce mini-projet, vous allez créer étape par étape un menu de navigation déroulant. En partant d’une barre de navigation supérieure basique, vous ajouterez un sous-menu sous « Jeux » 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 découvrant des concepts clés de la conception web comme flexbox et les styles interactifs.

Dans ce défi, vous allez commencer à créer votre menu déroulant en ajoutant le sous-menu sous l’élément de menu « Jeux ».

À l’intérieur du <li class="has-submenu"> correspondant à « Jeux », ajoutez un nouvel élément <ul class="submenu">.
À l’intérieur du sous-menu, créez 3 nouveaux éléments <li> :
1. Jeux de société
2. Jeux de cartes
3. Jeux vidéo

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