4 Farklı Renkte Menü

Tr.gg için yaptığım 4 farklı renkde hover özellikli menüyü sizler için paylaşıyorum. Menü renkleri Yeşil,turuncu,mavi,kırmızı dan oluşuyor.Menü bana aittir umarım yararım dokunuyodur.Kolay gelsin.

Not 1 : Sorunlarınız için iletişim bölümünden ulaşabilirsiniz

Not 2 : Yayınlamak Yasaktır.

Yeşil menu

<style type="text/css">
<!--
#Bedava-Sitem {
height: 25px;
width: auto;
}
#Bedava-Sitem ul {
list-style-type: none;
padding: 0px;
}
#Bedava-Sitem li {
float: left;
}
#Bedava-Sitem a {
display: block;
background-image: url(https://img.webme.com/pic/h/hiby/yesilb.jpg);
height: 25px;
width: 135px;
text-align: center;
font-family: Verdana
text-decoration: none;
color: #000000;
padding-top: 0px;
}
#Bedava-Sitem a:hover {
background-image: url(https://img.webme.com/pic/h/hiby/yesilb2.jpg);
font-family: Verdana
}
#Bedava-Sitem a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
-->
</style>
<div id="Bedava-Sitem">
<ul>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
</ul>
</div> Turuncu Menü <style type="text/css">
<!--
#Bedava-Sitem {
height: 25px;
width: auto;
}
#Bedava-Sitem ul {
list-style-type: none;
padding: 0px;
}
#Bedava-Sitem li {
float: left;
}
#Bedava-Sitem a {
display: block;
background-image: url(https://img.webme.com/pic/h/hiby/turuncub.jpg);
height: 25px;
width: 135px;
text-align: center;
font-family: Verdana
text-decoration: none;
color: #000000;
padding-top: 0px;
}
#Bedava-Sitem a:hover {
background-image: url(https://img.webme.com/pic/h/hiby/turuncub2.jpg);
font-family: Verdana
}
#Bedava-Sitem a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
-->
</style>
<div id="Bedava-Sitem">
<ul>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
</ul>
</div>

Mavi Menu

<style type="text/css">
<!--
#Bedava-Sitem {
height: 25px;
width: auto;
}
#Bedava-Sitem ul {
list-style-type: none;
padding: 0px;
}
#Bedava-Sitem li {
float: left;
}
#Bedava-Sitem a {
display: block;
background-image: url(https://img.webme.com/pic/h/hiby/mavib.jpg);
height: 25px;
width: 135px;
text-align: center;
font-family: Verdana
text-decoration: none;
color: #000000;
padding-top: 0px;
}
#Bedava-Sitem a:hover {
background-image: url(https://img.webme.com/pic/h/hiby/mavib2.jpg);
font-family: Verdana
}
#Bedava-Sitem a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
-->
</style>
<div id="Bedava-Sitem">
<ul>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
</ul>
</div>

Kırmızı Menü

<style type="text/css">
<!--
#Bedava-Sitem {
height: 25px;
width: auto;
}
#Bedava-Sitem ul {
list-style-type: none;
padding: 0px;
}
#Bedava-Sitem li {
float: left;
}
#Bedava-Sitem a {
display: block;
background-image: url(https://img.webme.com/pic/h/hiby/kirmizib.jpg);
height: 25px;
width: 135px;
text-align: center;
font-family: Verdana
text-decoration: none;
color: #000000;
padding-top: 0px;
}
#Bedava-Sitem a:hover {
background-image: url(https://img.webme.com/pic/h/hiby/kirmizib2.jpg);
font-family: Verdana
}
#Bedava-Sitem a {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
-->
</style>
<div id="Bedava-Sitem">
<ul>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
<li><a href="#">Bedava-Sitem</a></li>
</ul>
</div>