htmltrm

5 Renk Ust Menu

5Renkli Üst Menü...

/*=============Gri menü==============*/
.menu #gri ul {margin:0px; padding:0; list-style-type:none; width:100%; background:transparent url(https://img.webme.com/pic/h/hibycocuk/menu_gri.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid gray; height:30px!important; height:32px; overflow:hidden;}
.menu #gri ul li{display:block; float:left; border-right: 1px solid gray}
.menu #gri ul li a{color:#333; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px;}
.menu #gri ul li a:hover {color:#000; background: url(img/menu_gri.png) center -60px no-repeat;}
.menu #gri ul li a:active, .menu #gri ul li a.aktif {color:#fff; background: url(https://img.webme.com/pic/h/hibycocuk/menu_gri.png) center -30px no-repeat;}
/*=============Mavi menü==============*/
.menu #mavi ul {margin:0px; padding:0; list-style-type:none; width:100%; background:transparent url(https://img.webme.com/pic/h/hibycocuk/menu_mavi.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid #00aaff; height:30px!important; height:32px; overflow:hidden;}
.menu #mavi ul li{display:block; float:left; border-right: 1px solid #00aaff}
.menu #mavi ul li a{color:#fff; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px;}
.menu #mavi ul li a:hover {color:#000; background: url(img/menu_mavi.png) center -60px no-repeat;}
.menu #mavi ul li a:active, .menu #mavi ul li a.aktif {color:#333; background: url(img/menu_mavi.png) center -30px no-repeat;}
/*=============Kırmızı menü==============*/
.menu #red ul {margin:0px; padding:0; list-style-type:none; width:100%; background:transparent url(https://img.webme.com/pic/h/hibycocuk/menu_red.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid #333; height:30px!important; height:32px; overflow:hidden;}
.menu #red ul li{display:block; float:left; border-right: 1px solid #333}
.menu #red ul li a{color:#FFF; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px;}
.menu #red ul li a:hover {color:#000; background: url(img/menu_red.png) center -60px no-repeat;}
.menu #red ul li a:active, .menu #red ul li a.aktif {color:#fff; background: url(img/menu_red.png) center -30px no-repeat;}
/*=============Yeşil menü==============*/
.menu #yesil ul {margin:0px; padding:0; list-style-type:none; width:100%; background:transparent url(https://img.webme.com/pic/h/hibycocuk/menu_yesil.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid #419b00; height:30px!important; height:32px; overflow:hidden;}
.menu #yesil ul li{display:block; float:left; border-right: 1px solid #419b00}
.menu #yesil ul li a{color:#FFF; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px;}
.menu #yesil ul li a:hover {color:#000; background: url(img/menu_yesil.png) center -60px no-repeat;}
.menu #yesil ul li a:active, .menu #yesil ul li a.aktif {color:#000; background: url(img/menu_yesil.png) center -30px no-repeat;}
/*=============Turuncu menü==============*/
.menu #turuncu ul {margin:0px; padding:0; list-style-type:none; width:100%; background:transparent url(https://img.webme.com/pic/h/hibycocuk/menu_turuncu.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid #dc6b00; height:30px!important; height:32px; overflow:hidden;}
.menu #turuncu ul li{display:block; float:left; border-right: 1px solid #dc6b00}
.menu #turuncu ul li a{color:#FFF; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px;}
.menu #turuncu ul li a:hover {color:#000; background: url(img/menu_turuncu.png) center -60px no-repeat;}
.menu #turuncu ul li a:active, .menu #turuncu ul li a.aktif {color:#000; background: url(https://img.webme.com/pic/h/hibycocuk/menu_turuncu.png) center -30px no-repeat;}

<div class="menu">
<div id="gri">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
</div>



<div class="menu">
<div id="mavi">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
</div>



<div class="menu">
<div id="red">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
</div>



<div class="menu">
<div id="yesil">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
</div>



<div class="menu">
<div id="turuncu">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
</div>