Das Untermenü anzeigen

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

Aufgabe

Einfach

Nachdem du dein Untermenü hinzugefügt hast, ist dir wahrscheinlich aufgefallen, dass es nicht besonders gut aussieht. Es ist ständig sichtbar, und das Layout entspricht nicht unseren Vorstellungen.

In dieser Lektion schreibst du CSS, um das Untermenü standardmäßig auszublenden und bei einem Hover anzuzeigen, genau wie bei einem echten Dropdown-Menü. Außerdem fügst du einige einfache Stile hinzu, damit es übersichtlicher aussieht.

Das Untermenü standardmäßig ausblenden
Verwende die Eigenschaft display: none; für .submenu.
Das Untermenü bei einem Hover anzeigen
Verwende den Selektor .has-submenu:hover .submenu und setze display: block;.
Das Untermenü unterhalb des übergeordneten Elements positionieren
Setze position: absolute; für .submenu.
Stelle sicher, dass .has-submenu über position: relative; verfügt, damit es funktioniert.
Das Untermenü für ein besseres Erscheinungsbild gestalten

Eine Hintergrundfarbe festlegen
Standardmäßige Listenstile mit list-style: none; entfernen
Mit padding: 10px; Abstände innerhalb jedes Elements hinzufügen
Eine passende Breite hinzufügen

Du kannst alles nach Belieben anpassen – Farben, Schriftarten, Rahmen. Gestalte es ganz nach deinen Vorstellungen!

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>