CSS Üsten Açılır Menü Örneğim
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Üsten Açılır Menü Örneğim

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3391)
RAPOR ET
Daha önceden css ile yaptığım bir açılır menüyü paylaşmak istedim.Matığı şu position ile butonun altına alt kategorileri yerleştir gizle mouse ile butonun üzerine gelince o alanı göster.

Kodlar :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX3: Your First Canvas Application </title>
</head>
<style type="text/css">
body{margin:auto; text-align: center; }
#menu,#menu ul{list-style:none; margin:0; padding:0;}
#menu li {float:left; width:100px; position: relative; paddind:5px; }
#menu li a{text-decoration:none; color:#fff; font-size:20px; font:Arial bold; }
.a1{border-top-left-radius:30px; background-color:#666; padding-left:10px;}
.a2,#menu li ul{ background-color:#666; padding-left:10px;}
.a3{border-top-right-radius:30px; background-color:#666; padding-left:10px;}
#menu li a:hover,#menu li ul li a:hover{color:#ef3f89;}
#menu li ul{display:none; position:absolute; left:0;}
#menu li:hover ul{display:block;}

</style>
<body>

<ul id="menu">

<li class="a1"><a href="#">Anasayfa</a></li>
<li class="a2"><a href="#">Makaleler</a>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">CSS</a></li>
</ul></li>
<li class="a2"><a href="#">Hakkında</a></li>
<li class="a3"><a href="#">İletişim</a>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">CSS</a></li>
</ul></li>

</ul>


</body>
</html>


Video :



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol