Tutorial: Menu cute simplicity

Fazia tempo que eu não postava um tutorial aqui né?!  Sentiram saudades - digam que sim õ/ - 

Olhando minha página de goodies percebi que os menus estão em falta, o que é uma pena  porque eu adoro editar menus e tals... Prometo que vou atualizar mais a página de goodies, afinal ela é a mais visualizada do blog *--* mas por hoje eu vou ensinar vocês a fazerem esse menu:

Live Preview 

Bonitinho né?! Gente o menu original é esse aqui www eu apenas fiz uma edição básica, antes de postar aqui . Clique em leia mais e confira o tutorial... 

Antes de ]]></b:skin> cole isso:

.menu,.menu ul,.menu li,.menu a { margin: 0;padding: 0;border: none;outline: none;}.menu {height: 50px;width: 890px;margin-top:50px;background: transparente;-webkit-border-radius: 4px; -moz-border-radius:4px;border-radius: 4px;}.menu li {position: relative;list-style: none;float: left;display: block;height: 40px;}.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 0px dashed #393942;border-right: 0px dashed #4f5058;font-family: 'Quicksand', sans-serif;font-weight: bold;font-size: 18px;color: #bebebe; text-shadow: 0px 0px 0px rgba(1,1,1,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}.menu li:first-child a { border-left: none; }.menu li:last-child a{ border-right: none; }.menu li:hover >a { color: #FFC0CB; }.menu ul {position: absolute;top: 30px;left: 0;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}.menu li:hover > ul { opacity: 1; }.menu ul li {height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}.menu li:hover > ul li {height: 36px;overflow: visible;padding: 0;}.menu ul li a {width: 100px;padding: 4px 0 4px 40px;margin: 0;border: none;border-bottom: 1px solid #252525;}.menu ul li:last-child a { border: none; }.menu a.me { background: url(http://media.tumblr.com/tumblr_m6lxchb1NV1rrzsji.gif) no-repeat 15px center; }.menu a.site { background: url(http://media.tumblr.com/tumblr_m6lxbxXWb21rrzsji.gif) no-repeat 15px center; }.menu a.ask { background: url(http://media.tumblr.com/tumblr_m6lxazb2xS1rrzsji.gif) no-repeat 15px center; }.menu a.submit { background: url(http://media.tumblr.com/tumblr_m6lxaqkdfE1rrzsji.gif) no-repeat 15px center; }
.menu,.menu ul,.menu li,.menu a { margin: 0;padding: 0;border: none;outline: none;}.menu {height: 50px;width: 890px;margin-top:50px;background: transparente;-webkit-border-radius: 4px; -moz-border-radius:4px;border-radius: 4px;}.menu li {position: relative;list-style: none;float: left;display: block;height: 40px;}.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 0px dashed #393942;border-right: 0px dashed #4f5058;font-family: 'Quicksand', sans-serif;font-weight: bold;font-size: 18px;color: #bebebe; text-shadow: 0px 0px 0px rgba(1,1,1,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}.menu li:first-child a { border-left: none; }.menu li:last-child a{ border-right: none; }.menu li:hover >a { color: #FFC0CB; }.menu ul {position: absolute;top: 30px;left: 0;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}.menu li:hover > ul { opacity: 1; }.menu ul li {height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}.menu li:hover > ul li {height: 36px;overflow: visible;padding: 0;}.menu ul li a {width: 100px;padding: 4px 0 4px 40px;margin: 0;border: none;border-bottom: 1px solid #252525;}.menu ul li:last-child a { border: none; }.menu a.me { background: url(http://media.tumblr.com/tumblr_m6lxchb1NV1rrzsji.gif) no-repeat 15px center; }.menu a.site { background: url(http://media.tumblr.com/tumblr_m6lxbxXWb21rrzsji.gif) no-repeat 15px center; }.menu a.ask { background: url(http://media.tumblr.com/tumblr_m6lxazb2xS1rrzsji.gif) no-repeat 15px center; }.menu a.submit { background: url(http://media.tumblr.com/tumblr_m6lxaqkdfE1rrzsji.gif) no-repeat 15px center; }

Agora cole o próximo código ACIMA de </head> 

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'/>

 Visualize se o template não tiver com nenhum erro salve (:
 Onde você quer que o menu apareça cole isso:

<ul class="menu"><li><a href="LINKINÍCIO">Início</a></li><li><a href="#">Sobre</a><ul><li><a href="LINKPERFIL" class="me">Perfil</a></li><li><a href="LINKFAQ" class="site">FAQ</a></li></ul></li><li><a href="#">Tutoriais</a><ul><li><a href="LINKPARABLOG" class="ask">para blog</a></li><li><a href="LINKOUTROS" class="submit">outros</a></li></ul></li><li><a href="link">Textos tag</a></li><li><a href="LINK">Outro link</a></li><li><a href="LINK">E outro</a></li></ul>

 Entendendo:
Em vermelho: É o nome dos links que aparecem no menu, pode alterar se quiser...
Em azul: Você deve colocar os links de início, faq e etc... Cuidado pra não tirar as aspas do lado " , caso contrario o menu não irá funcionar.
Em verde: É o nome dos links que aparecem no submenu, pode alterar se quiser...
Em laranja: É os links do submenu... 

Espero que tenham gostado do tutorial de hoje, daqui a pouco eu vou postar uma

seleção de efeitos legais então fiquem de olho! beijus <3