Menu Let's

Olá, neste tutorial vou ensinar a vocês um menu,bom eu encontrei este menu em um site gringo e dei uma adaptada nele, ele e super simples mais tem um efeito bem legal.

Demonstração 

Primeiro vá em Modelo> Editar HTML > Prosseguir > Ctrl+F e procure por:  

]]

E logo apos cole o seguinte código acima da tag citada:

#menu-css li a { /* Animation (Webkit, Gecko & Mozilla) */ -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; } #menu-css li { display: inline; list-style: none; } #menu-css li a { /* Border Radius */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* Border Shadow */ -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); box-shadow: 1px 2px 2px rgba(0,0,0,0.6); /* Animation (Webkit, Gecko & Mozilla) */ -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; color: #fff; background-color: #514d4d; display: inline-block; padding: 5px 15px; outline: none; text-decoration: none; } #menu-css li a:hover { background-color: #625e5e; padding: 5px 25px; } #menu-css li a:active { background: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 1px rgba(0,0,0,0.4); }

Faça as modificações que deseja e cole o sequinte código onde quer que seu menu apareça:

<ul id="menu-css">
<li><a href="#">home</a></li>
<li><a href="#">artigos</a></li>
<li><a href="#">contato</a></li>
<li><a href="#">equipe</a></li>
</ul>

Espero que tenham gostado e até amanhã para mais um tutorial.