Mostrare il sottomenu

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 18 di 43.

Sfida

Facile

Ora che hai aggiunto il sottomenu, probabilmente hai notato che non ha un bell’aspetto. È sempre visibile e il layout non è quello che vogliamo.

In questa lezione, scriverai del CSS per nascondere il sottomenu per impostazione predefinita e farlo apparire al passaggio del cursore, proprio come un vero menu a discesa. Aggiungerai anche alcuni semplici stili per renderlo più ordinato.

Nascondi il sottomenu per impostazione predefinita
Usa la proprietà display: none; su .submenu.
Mostra il sottomenu al passaggio del cursore
Usa il selettore .has-submenu:hover .submenu e imposta display: block;.
Posiziona il sottomenu sotto l’elemento genitore
Imposta position: absolute; su .submenu.
Assicurati che .has-submenu abbia position: relative; affinché funzioni.
Stilizza il sottomenu per migliorarne l’aspetto

Imposta un colore di sfondo
Rimuovi gli stili predefiniti dell’elenco con list-style: none;
Aggiungi spazio all’interno di ogni elemento usando padding: 10px;
Aggiungi una larghezza adeguata

Sentiti libero di personalizzare qualsiasi cosa: colori, caratteri, bordi. Fallo tuo!

Provalo tu

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