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 :
UstaDerslik
