1. HTML Yapısı: Açılır menü için temel yapı, bir

   <button>

   veya menü bağlantısı ile bir

   <div>

   içinde yer alan bir liste elemanları (<ul>) setidir 2.

<div class="dropdown">
  <button class="dropbtn">Menü</button>
  <div class="dropdown-content">
    <a href="#">Anasayfa</a>
    <a href="#">Hakkımızda</a>
    <a href="#">Hizmetlerimiz</a>
    <a href="#">Galeri</a>
    <a href="#">İletişim</a>
  </div>
</div>
Kopyala

2. CSS ile Stilleme: Açılır menüyü CSS kullanarak stilize etmek mümkündür 23. Örneğin, menü öğelerini yatay veya dikey hizalayabilir, arka plan rengi ve yazı tipi gibi özellikleri özelleştirebilirsiniz 2.

/* Temel dropdown stilini tanımla */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown içeriğini gizle */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}

/* Dropdown içeriği görüntülendiğinde dropdown butonunun rengini değiştir */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown içeriği için link stilleri */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Dropdown içeriği linklerinin üzerine gelindiğinde arka plan rengini değiştir */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
Kopyala

3. Responsive Yapma: Açılır menüyü tüm cihazlarla uyumlu hale