08-02-2013, 02:17
Merhaba arkadaşlar ben eskidende burda olan forumun kapatılmasından dolayı forumdan ayrılan ve açılmasıyla birlikte yeniden gelen admininiz Aktif-im(Mustafa). Gelir gelmez sizlerle bir açılır menü çalışmamı paylaşacağım
Önizleme:
![menuu.png](http://img.webme.com/pic/a/aktif-im/menuu.png)
Kod
Önizleme:
![menuu.png](http://img.webme.com/pic/a/aktif-im/menuu.png)
Kod
Kod:
<style type="text/css">
ul.menu {list-style:none;margin:0;padding:0;font:bold 14px/24px arial, verdana, sans-serif;}
ul.menu li {float:left;position:relative;}
li ul {display:none;list-style:none;}
ul li a.menu{float:none;padding:8px 10px 8px 10px;background:#1e849c;color:#fff;display:block;text-decoration:none;
background: url(http://img.webme.com/pic/a/aktif-im/ilkhover.png) no-repeat;
border-bottom:4px solid #1e849c;
}
ul li a.menu:hover{color:#f5f5f5;background:#1e849c}
li:hover > ul {display:block;position:absolute;margin:0;padding:0;}
.acilir {width:250px;display:block;position:absolute}
.acilir h2 {color:#fff;background:#f5f5f5;display:block;margin:0 auto;padding-left:5px;font:bold 12px/24px arial, verdana, sans-serif;width:95%}
.acilir-ust {display:block;float:left;width:304px;height:30px;margin:-6px 0 0 0px;background:red;margin-top:5px;}
.acilir-ust p {font-size:11px; font-family:tahoma;color:#fff;margin-top:1px;padding-left:5px;}
.acilir-alt {display:block;background:url(http://img.webme.com/pic/a/aktif-im/acilir.png) no-repeat;float:left;width:304px;height:247px;}
.sol {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.sag {width:125px;margin:10px 15px 10px 10px;float:left;display:inline;font:14px/20px arial, verdana, sans-serif;}
.sol a {display:block;color:#fff;background:transparent;text-decoration:none;padding:6px}
.sag a {display:block;color:#fff;background:transparent;text-decoration:none;padding:6px}
.sol a:hover {color:#fff;background:#1e849c;text-decoration:none;padding:6px;font-weight:bold;}
.sag a:hover {color:#fff;background:#1e849c;text-decoration:none;padding:6px;font-weight:bold;}
#yukari {
border-bottom: 10px solid red;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0px;
position: absolute;
margin: 0px 0px 0px 16px;
width: 0px;
z-index: 2;
margin-top:-3px;
}
</style>
<ul class="menu"><br />
<li><a href="#" class="menu">Menü 1</a></li>
<li><a href="#" class="menu">Menü 2</a></li>
<li><a href="#" class="menu">Menü 3</a></li>
<li><a href="#" class="menu">Menü 4</a></li>
<li><a href="#" class="menu">Menü 5</a></li>
<li><a href="#" class="menu">Menü 6</a></li>
<li><a href="#" class="menu">Menü 7</a></li>
<li><a href="#" class="menu">Örnek Açılır</a>
<ul class="sub">
<li>
<div class="acilir" style="background-color:#f5f5f5;">
<div id="yukari" style="border-top-color:#e90000;"> </div>
<div class="acilir-ust" style="background-color:#1e849c;">
<p>Siteİsmi Kategorileri</p>
</div>
<div class="acilir-alt">
<div class="sol"><a href="#">Açılır 1</a> <a href="#">Açılır 2</a> <a href="#">Açılır 3</a> <a href="#">Açılır 4</a> <a href="#">Açılır 5</a> <a href="#">Açılır 6</a></div>
<div class="sag"><a href="#">Açılır 7</a> <a href="#">Açılır 8</a> <a href="#">Açılır 9</a></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
![imzagd.png](http://img.webme.com/pic/a/aktif-im/imzagd.png)