|
<style type="text/css">
*{margin: 0; padding: 0; border: 0; outline: 0; list-style:none; text-decoration:none;}
.header-menu{
width:1123px;/*TOPLAM LİNK UZUNLUĞU İTİYACINIZA GÖRE DEĞİŞTİRİNİZ*/
height:35px;/*LİNK KALINLIĞI*/
float:left;/*LİNK SOLA YASLANIR*/
background:orange;/*LİNK MENÜ RENGİ DEĞİŞTİREBİLİRSİNİZ*/
position:relative;
}
.header-menu a{
width:auto;
height:35px;
float:left;
font-size:12px;/*LİNK YAZILARI BÜYÜKLÜĞÜ*/
color:gray;/* EN ÜSTTEKİ LİNK YAZILARI RENGİ*/
padding-left:18px;
padding-right:18px;
border-right:solid 1px white;
line-height:35px;
}
.header-menu a:hover{
background:url(img/cizgi.png) right no-repeat #0099ff;/*EN ÜSTTEKİ LİNK KUTUSU RENGİ*/
}
.header-menu li a:hover{/*menu'nun içindeki Lİ'nin içindeki linkerin üzerine gelindiğinde uygulanacak stiller*/
background-color:#012D58;/*Linkin arkaplan rengini değiştir*/
color:#FF0;/*Linkin yaz rengini değiştir.*/
}
.header-menu li{
width:auto;
height:35px;
float:left;
position:relative;
}
.header-menu ul li ul{
width:260px;/* AÇILAN ALT MENÜNÜN UZUNLUĞU*/
height:auto;
float:left;
position:absolute;
top:35px;
left:1px;
z-index:1;
display:none;
}
.header-menu ul li ul a{
width:240px;/*AÇILAN MENÜNÜN UZUNLUĞU*/
height:30px;
line-height:30px;
float:left;
padding:0 0 0 10px;
border-top: dashed 1px gray;
background:none;
color:777/*AÇILAN MENÜNÜN YAZI RENGİ*/;
}
.header-menu ul li ul li {
height:30px;
line-height:30px;
background:#9CF;/*AÇILAN ALT MENÜ KUTU RENGİ*/
}
.header-menu li:hover > ul{
display: block;
}
.header-menu ul li ul li ul{
width:250px;
height:auto;
float:left;
position:absolute;
top:0px;
left:250px;
z-index:1;
display:none;
}
</style>
<title>Yatay Çok Katmanlı Açılır Menü CSS </title>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
});//]]>
</script>
</head>
<body>
<div class="header-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ü 14A</a></li>
<li><a href="#">Örnek Menü 14B</a></li>
<li><a href="#">Örnek Menü 14C</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ü 23A</a></li>
<li><a href="#">Örnek Menü 23B</a></li>
<li><a href="#">Örnek Menü 23C</a></li>
<li><a href="#">Örnek Menü 23D</a></li>
</ul>
</li>
<li><a href="#">Örnek Menü 24</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ü 31A</a></li>
<li><a href="#">Örnek Menü 31B</a></li>
<li><a href="#">Örnek Menü 31C</a></li>
<li><a href="#">Örnek Menü 31D</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ü 42A</a></li>
<li><a href="#">Örnek Menü 42B</a></li>
<li><a href="#">Örnek Menü 42C</a></li>
<li><a href="#">Örnek Menü 42D</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ü 611</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>
<li><a href="#">Örnek Menü 10</a>
<ul>
<li><a href="#">Örnek Menü 101</a></li>
</ul>
</li>
</div>
</body>
</html>
|
