Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır

Bu paylaşımımda sizlere hiçbir görsel kullanımı yapmadan güzel bir dropdown menünün nasıl yapılacağını anlatacağım.

İlk olarak menü elemanlarımızı tanımlayarak menümüzün iskeletini oluşturuyoruz,

<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Photoshop</a>
<ul>
<li><a href="#">Pattern</a></li>
<li><a href="#">Brush</a></li>
<li><a href="#">Dersler</a>
<ul>
<li><a href="#">Yazı</a></li>
<li><a href="#">Grafik</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Wordpress</a>
<ul>
<li><a href="#">Temalar</a></li>
<li><a href="#">Eklentiler</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>

Menü elementlerini tanımladıktan sonra menümüz aşağıdaki gibi görünmelidir

Şimdi menümüzü görsel açıdan zenginleştirip ufak tefek düzenlemeler yapmak için css tanımlamalarını yapıyoruz.Ben kod öbeğini tek seferde yazmanın daha kolay olacağını düşünüyorum,eğer kafanızı karıştıran bir kısımla karşılaşırsanız yorum bölümünden sorunuzu sorabilirsiniz.

nav ul ul {
 display: none;
}

nav ul li:hover > ul {
 display: block;
 }

 nav ul {
 background: #efefef;
 background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
 background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
 background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
 padding: 0 20px;
 list-style: none;
 position: relative;
 display: inline-table;
 font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 nav ul:after {
 content: ""; clear: both; display: block;
 }

 nav ul li {
 float: left;
}
 nav ul li:hover {
 background: #4b545f;
 background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
 background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
 background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
 }
 nav ul li:hover a {
 color: #fff;
 }

 nav ul li a {
 display: block; padding: 25px 40px;
 color: #757575; text-decoration: none;
 }

 nav ul ul {
 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;
}
 nav ul ul li {
 float: none;
 border-top: 1px solid #6b727c;
 border-bottom: 1px solid #575f6a;
 position: relative;
 }
 nav ul ul li a {
 padding: 15px 40px;
 color: #fff;
 }
 nav ul ul li a:hover {
 background: #4b545f;
 }

 nav ul ul ul {
 position: absolute; left: 100%; top:0;


  • teşekkürler paylaşım içinfakat kodları seçerken numaralarda kopyalanıyor :S

    • Kod kopyaladığınız alanın hemen sağ tarafında panoya kopyala diye bir ikon var. Onu tıklarsanız sadece kod kısmını kopyalayacaktır.

  • harika bir kod fakat resimde belirttiğim gibi nasıl yapabilirim…

  • Muhammet Ali ÖZKAYA

    Mobil için responsive değil. Ama yinede güzel bir paylaşım elinize sağlık