Css Dikey Açılır Menü Yapımı

[ravex]

<ul id="menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirket Tarihçesi</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>
<li><a href="#">Hizmetlerimiz</a>
<ul>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Tasarım</a></li>
<li><a href="#">Danışmalık</a></li>
</ul>
</li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>

Şimdi sıra geldi bu listeyi biçimlendirmeye stil için gerekli kodlar aşağıda türkçe meallerini yanlarına ekledim

list-style-type:none; //listeleme işaretlerini kaldır
margin:0; //Dış boşlukları sıfırla
padding:0; //İç boşlukları sıfırla
}
#menu li
{
position:relative;// /*Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. Burada Lİ özelliği UL'yi esas alarak yerini belirler.*/
width:130px;//genişliği 130px olarak ayarlandı
}
#menu a:hover // linklerin üzerine gelince zemin rengini değiştir.
{
background-color:#FF00FF;
color:#FFFFFF;
}
#menu a //linklerin özellikleri
{
text-decoration:none; //linklerin altındaki çizgiyi kaldır
display:block; //linkleri alt alta göster
background-color:#00FFFF; //zemin rengi
border:1px solid #000; //çerçeve özellikleri
padding:5px; / iç boşluk
}
#menu ul
{
list-style-type:none; //listeleme işaretlerini kaldır
margin:0; //Dış boşlukları sıfırla
padding:0; //İç boşlukları sıfırla
}
#menu li:hover ul
{
display:block; //li üzerine gelince ul yi göster
}
#menu li ul
{
display:none; //li nin içindeki ul'yi gizle
position:absolute; // li nin pozisyonu bir önceki relative nesneye göre ayarlanıyor
left:129px; //soldan 129px boşluk bırakılıyor.
top:0;
width:130px;
}