Css3, Xhtml ve jQuery ile Yatay Açılır Menü Yapımı

[list]
[*][url=http://sahra.forumdizini.com/#]Reşat Nuri Güntekin[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Çalıkuşu[/url]
[*][url=http://sahra.forumdizini.com/#]Yaprak Dökümü[/url]
[*][url=http://sahra.forumdizini.com/#]Son Sığınak[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Halide Edip Adıvar[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Sinekli Bakkal[/url]
[*][url=http://sahra.forumdizini.com/#]Ateşten Gömlek[/url]
[*][url=http://sahra.forumdizini.com/#]Vurun Kahpeye[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Namık Kemal[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]İntibah[/url]
[*][url=http://sahra.forumdizini.com/#]Vatan Yahut Silistre[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Peyami Safa[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Dokuzuncu Hariciye Koğuşu[/url]
[*][url=http://sahra.forumdizini.com/#]Fatih - Harbiye[/url]
[/list]
</li>
[*][url=http://sahra.forumdizini.com/#]Ömer Seyfettin[/url]
[list]
[*][url=http://sahra.forumdizini.com/#]Kaşağı[/url]
[*][url=http://sahra.forumdizini.com/#]Başını vermeyen şehit[/url]
[/list]
</li>



[/list]

#menu {
font:14px arial, verdana, sans-serif;
width:720px
}

#menu ul {
list-style:none;
margin:0;
background:#3ca0df url(menubg.gif) repeat-x bottom; /* menü arkaplan resmimiz tanımlanıyor. */
padding:5px;

/* Firefox, Chrome, Safari tarayıcılar için Border radius ve Shadow tanımları yapılıyor */

-moz-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-moz-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-khtml-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-khtml-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-webkit-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-webkit-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */
}

#menu li { /* menümüzün liste tanımı yapılıyor. */
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}

#menu a {
color:#fff;
text-decoration:none;
padding:4px;
display:block;
text-shadow:0px 1px 2px #000;
margin:0px 10px 0px 10px;
}

#menu a:hover {
color:#fff;
text-decoration:none;
padding:4px;
background:#333;
-moz-border-radius:3px; /* menü bağlantılarımıza küçük bir gölge efekti veriyoruz. */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

/* Alt menülerimizi gizliyor ve sonrasında alt menünün stil tanımlamalarına geçiyoruz. */

#menu li ul {
display:none; /* Alt menülerimizi gizliyoruz! */
position:absolute;
padding:0px;
margin:0px;
}

#menu li:hover > ul {
display:block; /* Alt menülerimiz #menu li üzerine fare ile gelinince görünecek şekilde hover ile gösterimini sağlıyoruz. */
position:absolute;
padding:0px 0px 0px 0px; /* margin ve padding değerlerini uygun şekilde ayarlıyoruz. */
margin:0px 10px 0px 10px;
width:150px;
left:0
}

/* Alt menü görünümünü değiştirecek olan stilleri yazıyoruz. */

#menu ul ul {
-moz-border-radius:4px; /* alt menümüzün köşelerini yuvarlıyoruz. */
-webkit-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
-khtml-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
width:150px;
margin:0px 10px 0px 10px;
border:1px solid #777;
}

#menu ul ul li {
display:block;
float:none;
}

#menu ul ul a { /* alt menü listemizin linklerini tanımlıyoruz. */
display:block;
font:14px/20px arial, verdana, sans-serif;
margin:0;
background:#888;
border-bottom:1px solid #777
}

#menu ul ul a:hover {
background:#f5cd14;
color:#fff;
}