Das Untermenü anzeigen

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 18 von 43.

Aufgabe

Einfach

Nachdem Ihr Untermenü nun hinzugefügt wurde, haben Sie wahrscheinlich bemerkt, dass es noch nicht optimal aussieht — es ist ständig sichtbar, und das Layout entspricht nicht unseren Vorstellungen.

In dieser Lektion werden Sie CSS schreiben, um das Untermenü standardmäßig auszublenden und es beim Hovern erscheinen zu lassen, genau wie bei einem echten Dropdown-Menü. Außerdem fügen Sie ein paar einfache Stile hinzu, um es sauberer aussehen zu lassen.

Das Untermenü standardmäßig ausblenden
Verwenden Sie die Eigenschaft display: none; für .submenu.
Das Untermenü beim Hovern anzeigen
Verwenden Sie den Selektor .has-submenu:hover .submenu und setzen Sie display: block;.
Das Untermenü unter dem Elternelement positionieren
Setzen Sie position: absolute; für .submenu.
Stellen Sie sicher, dass .has-submenu die Eigenschaft position: relative; hat, damit es funktioniert.
Das Untermenü für ein besseres Erscheinungsbild stylen

Legen Sie eine Hintergrundfarbe fest
Entfernen Sie die Standard-Listenstile mit list-style: none;
Fügen Sie Abstände innerhalb jedes Elements mit padding: 10px; hinzu
Fügen Sie eine angemessene Breite hinzu

Fühlen Sie sich frei, alles anzupassen — Farben, Schriftarten, Rahmen — machen Sie es zu Ihrem eigenen Projekt!

Probier es selbst

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