jQuery ile basit ve bir dropdown menü yapacağız. Önce menümüzün HTML kısmını inceleyelim.

<ul id="dropdown">
    <li><a href="#">anasayfa</a></li>
    <li>
        <a href="#">servisler</a>
        <ul>
            <li><a href="#">html</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">javascript</a></li>
        </ul>
    </li>
    <li><a href="#">iletişim</a></li>
</ul>

Şimdi de menünün doğru düzgün bir menü gibi görünmesi için biraz CSS yazalım:

ul {
margin:0;
padding:0;
list-style:none;
}
#dropdown {
margin:50px 0;
width:243px;
height:40px;
}
#dropdown li ul {display:none;}
#dropdown li {float:left;}
#dropdown li a{
width:80px;
height:40px;
display:block;
background-color:#aaa;
color:#000;
text-decoration:none;
font-size:18px;
text-align:center;
}
#dropdown li a:hover{
background-color:#ccc;
}
#dropdown li ul li {
float:none;
}
#dropdown li ul li a{
background-color:#f55;
}

Mennüyü renklendirdik şekillendirdik. Burada dikkat etmemiz gereken nokta #dropdown li ul { display:none} bölümü olacaktır. Çünkü bu kısım dropdown menünün ilk etapta  kapalı olmasını sağlayacaktır.

Son olarak da jQuery kısmını yazıyoruz.

$(document).ready(function(){
    $('#dropdown li a.menu').mouseover(function(){
        $('.gizli').slideDown('normal');
        $(this).parent().hover(function() {}, function(){
            $('.gizli').slideUp('normal');
        });
    });
});

Burada ikinci satırda menünün açılacağı linkin üzerine gelince slideDown() ile menüyü açıyoruz. Üçüncü satırda ise menünün dışına çıktığımızda yani parent elementinin hover olayı gerçekleştiğinde ise slideUp() ile menüyü kapatıyoruz. Bu örneğin demosunu şuradan görebilir, kaynak dosyalarını da buradan indirebilirsiniz.