Alt Menüyü Göster

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

Görev

Kolay

Alt menünüz eklendiğine göre, muhtemelen harika görünmediğini fark etmişsinizdir — her zaman görünür durumda ve düzen istediğimiz gibi değil.

Bu derste, tıpkı gerçek bir açılır menü gibi, alt menüyü varsayılan olarak gizlemek ve üzerine gelindiğinde (hover) görünmesini sağlamak için CSS yazacaksınız. Ayrıca daha temiz görünmesi için birkaç basit stil ekleyeceksiniz.

Alt menüyü varsayılan olarak gizleyin
.submenu üzerinde display: none; özelliğini kullanın.
Üzerine gelindiğinde alt menüyü gösterin
.has-submenu:hover .submenu seçicisini kullanın ve display: block; değerini atayın.
Alt menüyü üst öğenin altına konumlandırın
.submenu üzerinde position: absolute; özelliğini ayarlayın.
Bunun çalışması için .has-submenu öğesinin position: relative; özelliğine sahip olduğundan emin olun.
Daha iyi bir görünüm için alt menüyü stillendirin

Bir arka plan rengi ayarlayın
list-style: none; ile varsayılan liste stillerini kaldırın
padding: 10px; kullanarak her öğenin içine boşluk ekleyin
Uygun bir genişlik ekleyin

Her şeyi özelleştirmekten çekinmeyin — renkler, yazı tipleri, kenarlıklar — onu kendinize özel yapın!

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