Tutorial: Another Menu

Mesmo tendo pegado o menu do Tumblr, eu passei o código para o Blogger, então credite os dois se usar. Clique aqui e veja o menu. Tem como deixar uma coluna de cada cor. Quer aprender?

Go, Cherrys .

Primeiro, crie um gadget de HTML JavaScript e cole:

<ul id=”nav”>
<li class=”home”><a href=”#”>LINK</a></li>
<li class=”tutorials”><a href=”#”>LINK</a></li>
<li class=”about”><a href=”#”>LINK</a></li>
<li class=”news”><a href=”#”>LINK</a></li>
<li class=”contact”><a href=”#”>LINK</a></li>
</ul>

 Onde tem # é o lugar do link. 
Depois vá até Modelo>> Editar HTML>> Tecle CtrlF e procure por ]]></b:skin> . Acima dele, cole:
ul li { background: transparent list-style: none; height: 44px; float:left; padding:10px 5px;}ul li a { width: 90px; height: 40px; line-height: 53px; border-bottom: 4px solid #636393; padding:5px; color: #212121;font-family: 'Electrolize', sans-serif; font-size:15px;text-transform:uppercase; font-weight:lighter; text-align:center; text-decoration: none; display: block; -webkit-transition: .2s all linear; -moz-transition: .2s all linear; -o-transition: .2s all linear; transition: .2s all linear;} li:nth-child(1) a {border-color: #651201;}li:nth-child(2) a {border-color: #651201;}li:nth-child(3) a {border-color: #651201;}li:nth-child(4) a {border-color: #651201;}li:nth-child(5) a {border-color: #651201;}  li:nth-child(1) a:hover {border-bottom: 35px solid #651201; height: 9px;}li:nth-child(2) a:hover {border-bottom: 35px solid #651201; height: 9px;}li:nth-child(3) a:hover {border-bottom: 35px solid #651201; height: 9px;}li:nth-child(4) a:hover {border-bottom: 35px solid #651201; height: 9px;}li:nth-child(5) a:hover {border-bottom: 35px solid #651201; height: 9px;}
Troque #651201 pela cor que você quiser.

Créditos >> Teen Bomb's