Evet arkadaşlar.

Bu dersimizde sizlere CSS ile dikey açılır menü yapımını anlatmaya çalışacağım. Önceki dersimizde Yatay açılır menü yapımını göstermiştik. Aynı menü üzerinden dikey olanını yapmaya çalışalım...

Öncelikle menülerimizi oluşturuyoruz normal bir şekilde. Alt menülerimizi de yapıyoruz. Açılır menümüzün olacağı ana menülerin sonununu </li> ile bitirmemeniz gerektiğini unutmayın!.. Aksi hâlde css'e geçtiğimiz zaman açılır menünüzü ana menü olarak görebilirsiniz.

<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirketimizin Tarihi</a></li>
<li><a href="#">Yöneticilerimiz</a></li>
<li><a href="#">Çalışanlarımız</a></li>
<li><a href="#">Faaliyetlerimiz</a></li>
</ul>
<li><a href="#">Referanslarımız</a>
<ul> 
<li><a href="#">Deneyimlerimiz</a></li>
<li><a href="#">Ne dediler?</a></li>
</ul>
<li><a href="#">Hizmetlerimiz</a>
<ul> 
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Logo Tasarım</a></li>
<li><a href="#">Danışmanlık Hizmetimiz</a></li>
<li><a href="#">Diğer Hizmetler</a></li>
</ul>
</ul>

Şimdi menülerimizin önündeki simgeleri gizleyelim.

ul {
padding:0;
margin:0;
list-style:none;
width:100px;
}

Açılır menümüzün özelliklerini verelim.

li ul {
position: absolute;
left: 100px;
top: 0;
display: none;
}

Şimdi de gizlediğimiz menülerin pozisyonunu ve açılırlığını sağlayalım...

ul li { 
position: relative;
}

li:hover ul { 
display: block;
}

Şimdi de menümüzün rengi, kenarlıkları gibi ayarları yapalım:

ul li a {
display:block;
text-decoration:none;
background-color:#FFFF00;
padding:3px;
border:solid 1px #000000;
border-bottom:0;
}

Son olarak da yazımızın rengini ayarlayalım.

a {
color: #FFFFFF;
}

Menümüz hazır...