DENTASARIM | Tasarımın bizden!

Renkli yatay menü v1

CSS KODU:

#denememenu {
width: 900px;
margin: auto;
height: 40px;
/* [disabled]background-color: #F7F7F7; */
}
#denememenu ul li .anasayfa {
text-decoration: none;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #F90;
display: block;
}
#denememenu ul li a {
text-decoration: none;
color: #333;
font-size: 14px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
-o-transition: all 0.1s ease-in-out 0.1;
-ms-transition: all 0.1s ease-in-out 0.1s;
}
#denememenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#denememenu ul li {
text-align: center;
display: block;
float: left;
width: 140px;
height: 40px;
line-height: 40px;
margin-right: 5px;
margin-left: 5px;
}
#denememenu ul li .iletisim {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #69F;
display: block;
}
#denememenu ul li .hakkimda {
display: block;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #9C9;
}
#denememenu ul li .yorumla {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #F9F;
display: block;
}
#denememenu ul li .projeler {
display: block;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #366;
}
#denememenu ul li .forum {
display: block;
border-bottom-color: #936;
border-bottom-width: 2px;
border-bottom-style: solid;
}
#denememenu ul li .anasayfa:hover {
text-decoration: none;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #F90;
display: block;
background-color: #F90;
}
#denememenu ul li a:hover {
text-decoration: none;
color: #FFF;
font-weight: normal;
}
#denememenu ul li .iletisim:hover {
text-decoration: none;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #69F;
display: block;
background-color: #69F;
}
#denememenu ul li .hakkimda:hover {
background-color: #9C9;
}
#denememenu ul li .yorumla:hover {
background-color: #F9F;
}
#denememenu ul li .projeler:hover {
background-color: #366;
}
#denememenu ul li .forum:hover {
background-color: #936;
}
#denememenu ul li a:hover {
text-decoration: none;
color: #FFF;
font-size: 14px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
box-shadow: 1px 1px 2px #333;
}

HTML KODU:

<div id="denememenu">
<ul>
<li><a href="http://www.dentasarim.tr.gg" class="anasayfa">ANASAYFA</a></li>
<li><a href="http://www.dentasarim.tr.gg" class="iletisim">İLETİŞİM</a></li>
<li><a href="http://www.dentasarim.tr.gg" class="hakkimda">HAKKIMDA</a></li>
<li><a href="http://www.dentasarim.tr.gg" class="yorumla">YORUMLA</a></li>
<li><a href="http://www.dentasarim.tr.gg" class="projeler">PROJELER</a></li>
<li><a href="http://www.dentasarim.tr.gg" class="forum">FORUM</a></li>
</ul>
</div>

Kendi yapımımdır, kaynak göstermeden paylaşmayın!