AŞAĞIDAKİ KODLARI KOPYALAYIN
MENÜYÜ İSTEĞİNİZE GÖRE DEĞİŞTİRİN
SİTENİZE YAPIŞTIRIN...
<html>
MENÜYÜ İSTEĞİNİZE GÖRE DEĞİŞTİRİN
SİTENİZE YAPIŞTIRIN...
<html>
<head>
<title>Css Açılır Dikey Menü Tasarımı</title>
<style type="text/css">
.menu ul {
margin:0;
padding:0;
list-style:none;
background:0099ff;
font-size: 24px;
width:250px;
border:1px solid #000;
border-buttom:2px solid gray;}
.menu li {
position:relative;}
.menu li ul {
position:absolute;
list-style:none;
font-size: 20px;
left:249px;
width:250px;
display:none;
top:0; }
.menu li ul li ul {
position:absolute;
list-style:none;
font-size: 18px;
left:249px;
width:300px;
display:none;
top:0; }
.menu li a {
display:block;
text-decoration:none;
color:#000;
background-color:#9cf;
font:bold 16px ;
padding:5px;
border:1px solid #000;
border:2px solid #cca "times new roman";
border-buttom:0;}
.menu li a:hover{
background-color:#012d58;
color:#ff0;
}
li:hover ul {
display:block;
}
li ul li:hover ul {display:block;}
* html ul li {
float:left;
height:2%; }
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">ÖRNEK MENÜ 1</a>
<ul>
<li><a href="#">Örnek Menü 11</a></li>
<li><a href="#">Örnek Menü 12</a></li>
<li><a href="#">Örnek Menü 13</a></li>
<li><a href="#">Örnek Menü 14</a>
<ul>
<li><a href="#">Örnek Menü 141</a></li>
<li><a href="#">Örnek Menü 142</a></li>
<li><a href="#">Örnek Menü 143 </a></li>
</ul>
</li>
</ul>
<li><a href="#">ÖRNEK MENÜ 2</a>
<ul>
<li><a href="#">Örnek Menü 21</a></li>
<li><a href="#">Örnek Menü 22</a></li>
<li><a href="#">Örnek Menü 23 </a>
<ul> <li><a href="#">Örnek Menü 231</a></li>
<li><a href="#">Örnek Menü 232</a></li>
<li><a href="#">Örnek Menü 233</a></li>
<li><a href="#">Örnek Menü 234</a></li>
</ul>
</li>
<li><a href="#">Örnek Menü 241</a></li>
</ul>
</li>
<li><a href="#">ÖRNEK MENÜ 3</a>
<ul>
<li><a href="#">Örnek Menü 31</a>
<ul><li><a href="#">Örnek Menü 311</a></li>
<li><a href="#">Örnek Menü 312</a></li>
<li><a href="#">Örnek Menü 313</a></li>
<li><a href="#">Örnek Menü 314</a></li>
</ul>
</li>
<li><a href="#">Örnek Menü 32</a></li>
<li><a href="#">Örnek Menü 33 </a></li>
</ul>
<li><a href="#">ÖRNEK MENÜ 4</a>
<ul>
<li><a href="#">Örnek Menü 41</a></li>
<li><a href="#">Örnek Menü 42</a>
<ul><li><a href="#">Örnek Menü 421</a></li>
<li><a href="#">Örnek Menü 422</a></li>
<li><a href="#">Örnek Menü 423</a></li>
<li><a href="#">Örnek Menü 424</a>
</ul>
</li>
<li><a href="#">Örnek Menü 43 </a></li>
</ul>
<li><a href="#">ÖRNEK MENÜ 5</a>
<ul>
<li><a href="#">Örnek Menü 51</a>
<ul><li><a href="#">Örnek Menü 511</a></li>
<li><a href="#">Örnek Menü 512</a></li>
</ul>
</li>
</ul>
<li><a href="#">ÖRNEK MENÜ 6</a>
<ul>
<li><a href="#">Örnek Menü 61</a></li>
</ul>
</li>
<li><a href="#">ÖRNEK MENÜ 7</a>
<ul>
<li><a href="#">Örnek Menü 71</a></li>
</ul>
</li>
<li><a href="#">ÖRNEK MENÜ 8</a>
<ul>
<li><a href="#">Örnek Menü 81</a></li>
</ul>
</li>
<li><a href="#">ÖRNEK MENÜ 9</a>
<ul>
<li><a href="#">Örnek Menü 91</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hiç yorum yok:
Yorum Gönder
Not: Yalnızca bu blogun üyesi yorum gönderebilir.