Ali Mengü | Kişisel Web Sayfasi

Yatay Açilir CSS Menu Nasıl Yapilir?

Herkese Merhabalar,Uzun zaman sonra yeni bir konuyla karşınızdayım.

Soru ; Yatay açılır CSS Menu Nasıl Yapılır.Dersini Sitenize Eklerseniz Sevinirm.
Cevap ; Daha önce anlatmış olduğum Yatay CSS Menu Yapimi Dersimi İzlediyseniz ve anladiysaniz bu derste pek zorluk çekiceğinizi sanmiyorum.
Derste Kullanilan Özellikleri Bilmiyorum Diyorsaniz?
Margin ve Padding Nedir? Nasıl Kullanilir?
CSS de Border Özelliği

---

PART1
PART2
PART3

---

Ayrintili Görünüm İçin Tıklayınız
<style type="text/css">
<!--
#menu {
    height: 39px;
    background-image: url(http://alimengu.tk/alimengu.png);
    border: 1px solid #000000;
    text-align:left;
}
#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#menu li {
    float: left;
}
#menu a {
    display: block;
    width: 120px;
    height: 27px;
    text-align: center;
    padding-top: 12px;
    font-family: Tahoma;
    text-decoration: none;
    color: #000000;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000000;
}
#menu a:hover {
    background-image: url(http://alimengu.tk/alimengu2.png);
}
#menu ul li ul {
    position: absolute;
    width: 150px;
    display: none;
}
#menu ul li:hover ul {
    display: block;
}
#menu ul li ul li a {
    width: 180px;
    height: 20px;
    padding-top: 5px;
    text-align: left;
    padding-left: 2px;
    background-color: #F27423;
    border: 1px solid #000000;
    font-size: 14px;
}
#menu ul li ul li a:hover {
    background-image: url(http://alimengu.tk/alimengu3.png);
}
-->
</style>
<div id="menu">
<ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkimda</a></li>
    <li><a href="#">Z.Defteri</a></li>
<li><a href="#">Tasarimlar</a>
<ul>
 <li><a href="#">CSS Tasarimlar</a></li>
 <li><a href="#">Tablo Tasarimlar</a></li>
 <li><a href="#">Hazir Tasarimlar</a></li>
</ul>
</li>
    <li><a href="#">Iletisim</a></li>
  </ul>
</div>