Alt Menüyü Göster

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

Görev

Kolay

Artık alt menünüz eklendiğine göre, muhtemelen harika görünmediğini fark etmişsinizdir. Alt menü sürekli görünür durumda ve düzen istediğimiz gibi değil.

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

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

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: renkleri, yazı tiplerini, kenarlıkları değiştirin ve onu kendinize özgü hâle getirin!

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>