Tambahkan Submenu

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 17 dari 43.

Tantangan

Mudah

Dalam proyek mini ini, kamu akan membuat menu navigasi dropdown langkah demi langkah. Kamu akan mulai dengan bilah navigasi atas sederhana, lalu menambahkan submenu di bawah "Games" dan menatanya menggunakan pseudo-class CSS. Kamu juga akan menyempurnakan desain dengan bilah pencarian dan tombol CTA, sambil mempelajari konsep utama desain web seperti flexbox dan gaya interaktif.

Dalam tantangan ini, kamu akan mulai membuat menu dropdown dengan menambahkan submenu di bawah item menu "Games".

Di dalam <li class="has-submenu"> untuk "Games", tambahkan <ul class="submenu"> baru.
Di dalam submenu, buat 3 item <li> baru:
1. Board Games
2. Card Games
3. Video Games

Pada tahap ini, fokuslah untuk menulis struktur HTML yang benar. Belum perlu menambahkan gaya.

Coba sendiri

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