JS İle Yatay Açılır Menü Oluşturmak

Selamlar, Derse Başlıyorum;
Yatay menüler nerdeyse her web sayfasında görülen türden menülerdir ve fazlasıyla kullanışlıdırlar.eğer bunların görselliğini arttırırsak çok işimize yarayacaktır.

önce HTML kodlarımızı yazalım,tabiki kütüphaneyi tanıttıktan sonra;

<div id="komple">

<ul id="menu" >
    <li><a href="#">Anasayfa</a></li>
    <li><a class="ustmenu" href="#">Menü</a>
    <ul class="altmenu">
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>

    </ul>
    </li>
    <li ><a class="ustmenu" href="#">Menü</a>
    <ul class="altmenu" >
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>

    </ul>
    </li>
    <li ><a class="ustmenu" href="#">Menü</a>
    <ul class="altmenu" >
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>

    </ul>
    </li>
    <li ><a class="ustmenu" href="#">Menü</a>
    <ul class="altmenu" >
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
    </ul>
    </li>
    <li ><a class="ustmenu" href="#">Menü</a>
    <ul class="altmenu" >
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi </a></li>
        <li><a href="#">Alt Menü Öğesi</a></li>

    </ul>
    </li>
</ul>
</div>

Şimdi Sıra geldi JS kodlarını yazmaya önce alt menüleri gizlemekle başlayalım, script tagımızı açıp alt menüleri gizlemek için kodları yazalım;
$(document).ready(function(){
$('ul.altmenu').hide();
Gizlemek için kullandığımız kod: $('altmenununclass'ı').hide(); Şimdi gelelim kalan js kodlarına burda alt menülerin açılması için kodları yazıcağız.

$('a.ustmenu').hover(function(){
           $(this).parent().find('.altmenu').fadeIn('normal');
           $(this).parent().hover(function() {}, function(){$(this).parent().find(".altmenu").fadeOut('normal');});
     });
});

 önceki açtığımız parantezide kapttık, artık js kodlarımız tamam.fakat ufak bi ayrıntıyı belirteyimki 'normal'yazan yerler açılıp kapanma hızı buna fast ,slow veya istediğimiz süreyi belirtebiliriz.yalnız süre belirteceksek tırnakları koymuyoruz. Örnek: fadeIn(700) , fadeOut(300)  gibi.gelelim css kodlarına.ben renklerine pek uğraşmadım,siz renklendirebilirsiniz.;

body
{
background-color:#424242;
}
#komple
{
height:31px;
width:930px;
border-radius:7px;
border:0 solid green;
background-color:#efefef;
}

ul#menu, ul#menu ul {
    list-style: none;
    margin-left: 36px;
margin-bottom:-5px !important;
    padding: 0;
text-align:center;
}
ul#menu li {
    float: left;
border-radius:15px;
margin-left:-1px;
    position: relative;
height:21px;
    width: 150px;
}
ul#menu li a:hover{color:#FFF; background:#A1A1A1; }
ul#menu li ul {
    /*display: none; */
    position: absolute;
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
    right: 0;
margin-top:0;

}
ul#menu li > ul {
    top: auto;
    left: auto;
}
ul#menu li a {
    font: bold 11px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
border-radius:0;
line-height:20px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
border-bottom-color:#efefef;
border-top-color:#efefef;
border-right-color:#ddd;
border-left-color:#ddd;
    margin: 0;
    padding: 2px 3px;
    color: #000;
height:25px;
    background: #efefef;
    text-decoration: none;
}
ul#menu li ul a {
    font: bold 11px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
line-height:15px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    margin: 0;
    padding: 2px 3px;
    color: #000;
height:15px;
    background: #efefef;
    text-decoration: none;
}
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("menu");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                this.className+=" over";
                }
                node.onmouseout=function() {
                this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;
ul#menu li:hover ul, ul#menu li.over ul{
    display: block;
}