Forum'da ara:
Ara


Yazar Mesaj
Mesaj28.10.2014, 18:17 (UTC)    
Mesaj konusu: HTML5 ile açılır menü kodu

Kod:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;display:block;color:#fff;}

/*menu*/
.nav_kapsayan{width:100%;height:70px;background:#3 65;}
ul.menu_kapsayan{width:980px;height:70px;margin:0 auto;}
ul.menu_kapsayan>li{float:left;position:relative;}
ul.menu_kapsayan>li>a{padding:0 10px;background:#456;font-size:18px;height:70px;line-height:70px;border-right:1px solid #fff;}
ul.menu_kapsayan>li:last-child>a{border-right:none;}
ul.menu_kapsayan>li>a:hover{background:#455;}
ul.menu_kapsayan>li>ul{display:none;position:absol ute;width:100px;background:#365;z-index:9;}
ul.menu_kapsayan>li:hover>ul{display:block;}
ul.menu_kapsayan>li>ul>li{width:100%;text-align:center;}
ul.menu_kapsayan>li>ul>li>a{width:100%;background: #456;font-size:15px;height:50px;line-height:50px;border-bottom:1px solid #fff;}
ul.menu_kapsayan>li>ul>li>a:hover{background:#455; }
</style>
</head>
<body>
<nav class="nav_kapsayan">
<ul class="menu_kapsayan">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Popüler Konular</a>
<ul>
<li><a href="#">Tokyo Ghoul Tanıtımı</a></li>
<li><a href="#">One piece tanıtım</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Dersler</a>
<ul>
<li><a href="#">Senlik</a></li>
<li><a href="#">Onluk</a></li>
</ul>
</li>
<li><a href="#">dasdas</a></li>
<li><a href="#">button</a>
<ul>
<li><a href="#">dd</a></li>
<li><a href="#">alt menu 2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu