jQuery Kullanmadan CSS Açılır Menü Yapımı

Gecenin bi vakti ne yapacağımı düşünürken, aslında zamanında bana da çok lazım olan bir konuya deyineyim ve bu örneğimi sizinle paylaşayım dedim, oldukça basit bir hiyerarşisi olan kafa karıştırmayan bir kod sistemi ile sitelerinize basit bir css menü ekleyebilirsiniz..







CSS Kodu:

<style type="text/css">
ul, li, a {padding:0; margin:0; text-decoration:none; list-style:none}
#menu li {float:left; background:#CC3333; margin-right:1px}
#menu li:hover {background:#000000;}
#menu li a {display:block; padding:10px; font-family:Arial; color:#fff}
.acilir:hover ul.menu2 {display:block} <!-- olay burada bitiyor.. -->
.menu2 {width:200px; position:absolute; background:#000; display:none;}
.menu2 a { border-bottom:1px #999999 solid;}
</style>

HTML Kodu:

<ul id="menu">
 <li><a href="#">Ana Sayfa</a></li>
   <li><a href="#">Hakkımızda</a></li>
 <li class="acilir"><a href="#">Ürünler</a>
     <ul class="menu2">
        <a href="#">Klavye</a>
        <a href="#">Monitör</a>
        </ul>
    </li>
 <li><a href="#">İletişim</a></li>            
</ul>

Ön izleme: