Código do menu Colors

Views:
<center><div id="colormenu">
<span class="aba1"><a href="#">Início</a></span>
<span class="aba2"><a href="#">Quem somos</a></span>
<span class="aba3"><a href="#">Tutoriais</a></span>
<span class="aba4"><a href="#">Receitas</a></span>
<span class="aba5"><a href="#">Vídeos</a></span>
<span class="aba6"><a href="#">Fanpage</a></span>
<span class="aba7"><a href="#">Anuncie</a></span>
<span class="aba8"><a href="#">Contato</a></span>
</div>
<style type="text/css">
#colormenu {
margin: 5px;
padding: 5px
}

#colormenu a {
font-family: Arial, Helvetica, sans-serif;
padding: 6px 20px 9px 20px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}

#colormenu .aba1 a, #colormenu .aba2 a, #colormenu .aba3 a, #colormenu .aba4 a, #colormenu .aba5 a #colormenu .aba6 a, #colormenu .aba7 a, #colormenu .aba8 a{
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out
}

#colormenu .aba1 a {
border-top: 6px solid #326abd;
}

#colormenu .aba2 a {
border-top: 6px solid #b8462c;
}

#colormenu .aba3 a {
border-top: 6px solid #66CDCC;
}

#colormenu .aba4 a {
border-top: 6px solid #e6ab07;
}

#colormenu .aba5 a {
border-top: 6px solid #F944A5;
}

#colormenu .aba6 a {
border-top: 6px solid #2b9435;
}

#colormenu .aba7 a {
border-top: 6px solid #7D409D;
}

#colormenu .aba8 a {
border-top: 6px solid #F944A5;
}

#colormenu .aba1 a:hover {
color: #FFF;
background-color: #326abd;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba2 a:hover {
color: #FFF;
background-color: #b8462c;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba3 a:hover {
color: #FFF;
background-color: #66CDCC;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba4 a:hover {
color: #FFF;
background-color: #e6ab07;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba5 a:hover {
color: #FFF;
background-color: #F944A5;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba6 a:hover {
color: #FFF;
background-color: #2b9435;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba7 a:hover {
color: #FFF;
background-color: #7D409D;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

#colormenu .aba8 a:hover {
color: #FFF;
background-color: #F944A5;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
}

</style></center>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage