Alt Menüyü Ekle

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 17 / 43.

Görev

Kolay

Bu mini projede, adım adım açılır menü navigasyonu oluşturacaksın. Temel bir üst navigasyon çubuğuyla başlayıp "Oyunlar" öğesinin altına bir alt menü ekleyecek ve CSS sözde sınıflarını kullanarak bu menüyü biçimlendireceksin. Ayrıca yol boyunca flexbox ve etkileşimli stiller gibi önemli web tasarımı kavramlarını öğrenirken tasarımı bir arama çubuğu ve CTA düğmesiyle geliştireceksin.

Bu meydan okumada, "Oyunlar" menü öğesinin altına alt menüyü ekleyerek açılır menünü oluşturmaya başlayacaksın.

"Oyunlar" için <li class="has-submenu"> öğesinin içine yeni bir <ul class="submenu"> ekle.
Alt menünün içine 3 yeni <li> öğesi oluştur:
1. Masa Oyunları
2. Kart Oyunları
3. Video Oyunları

Bu aşamada doğru HTML yapısını yazmaya odaklan: henüz biçimlendirme gerekmiyor.

Kendin dene

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