Alt Menüyü Ekle

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

Görev

Kolay

Bu mini projede, adım adım bir açılır navigasyon menüsü oluşturacaksınız. Temel bir üst navigasyon çubuğuyla başlayarak, "Games" altına bir alt menü ekleyecek ve bunu CSS sözde sınıflarını (pseudo-classes) kullanarak şekillendireceksiniz. Ayrıca, bir arama çubuğu ve CTA butonu ile tasarımı geliştirecek, bu süreçte flexbox ve etkileşimli stiller gibi temel web tasarımı kavramlarını öğreneceksiniz.

Bu görevde, "Games" menü öğesinin altına alt menüyü ekleyerek açılır menünüzü oluşturmaya başlayacaksınız.

"Games" için olan <li class="has-submenu"> etiketinin içine yeni bir <ul class="submenu"> ekleyin.
Alt menünün içine 3 yeni <li> öğesi oluşturun:
1. Board Games
2. Card Games
3. Video Games

Bu aşamada, doğru HTML yapısını yazmaya odaklanın; henüz stil vermenize gerek yok.

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>