CSS Açılır Menü Yapımı Yardım Gerekli

merhabalar,
css te açılır menü yapmaya çalışıyorum. hazıra konmayı pek sevmediğim kendim biraz uğraşıp denemek istedim. ama bir sorunum var ekran görüntüm şöyle oldu:



sizdem istediğim yardım kodlarımdaki eksik ya da hatayı bulup bana açıklayıp sorunumu çözmemde yardımcı olmanız. kod bloğum aşağıda

CSS
[BILGI].menu{
list-style-type: none;
margin:0;
padding:0;
width:500px;
border-bottom: solid blue 3px;
}
.menu li{positiob:relative;}
.menu li ul{
position: absolute;
left: 100px;
top: 0;
display:block;
}
.menu li a:link, .menu li a:visited{
display:block;
background-color:green;
color:red;
text-decoration: none;
border: solid blue 3px;
border-bottom: 0;


}
.menu li a:hover, .menu li a:active{
display:block;
background-color:grey;
color:blue;
text-decoration: none;
border: solid blue 3px;
border-bottom: 0;


}[/BILGI]

HTML:
[BILGI]<ul class="menu" > <li><a href="#">Anasayfa</a></li>

<li><a href="#">HTML Dersleri</a>
<ul>
<li><a href="#">Ders 1</a></li>
<li><a href="#">Ders 2</a></li>
<li><a href="#">Ders 3</a></li>
</ul>
</li>

<li><a href="#">CSS Dersleri</a>
<ul>
<li><a href="#">Ders 01</a></li>
<li><a href="#">Ders 02</a></li>
</ul>
</li>
</ul>[/BILGI]

inceliyorum usta. bugün ya da yarın kesin sonucu buraya yazarım

----------

_DeaLyDeviL_' Alıntı:

Bak burada çok güzel anlatılmış. Bazı şeyler kopya çekerek öğrenilir. Ben burada direk fotokopi yap demiyorum çok farklı şeyler. O yüzden bazı şeyler için hazıra konmak gerekir.

HTML de sorun yok gibi sorun büyük ithimal css de. Ayrıca css builder da kullanabilirsin.

Genişletmek için tıkla ...

denemelerle çözüme ulaştım. hem fatih hayrioğlu hem de senin verdiğin linkten karışımlar yaptım. kendi özgün menümü oluşturdum. iş şu sınıfı oluşturmaktaymış demekki: .menu li:hover ul{}

yeni görüntü ve css kodları:

[BILGI].menu{
list-style-type: none;
margin:0;
padding:0;
width:150px;
background-color:grey;
border-bottom: solid red 2px;
}


.menu li{
list-style-type: none;
position:relative;
}
.menu a{
display:block;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color:white;
border: solid red 2px;
border-bottom:0;
padding: 5px;
text-decoration: none;
}
.menu a:hover{
background-colorrange;
}
.menu li ul {
position: absolute;
left:148px;
top:0;
list-style-type: none;
margin:0;padding:0;
display: none;
width:149px;
border-bottom: solid red 2px;
background-color:grey;
}
.menu li:hover ul{
display:block;
position: absolute;
}
[/BILGI]