Tutorial - Menu drop down fofo

Oi meus príncipes and princesas *-*

tudo bem ? É {...} ontem fiquei o dia quase todo sem postar, por falta de criatividade, mas hoje voltou tudo ao normal n_n . Vamos ao tutorial ?

Demo do menu ;

Primeiro cole esse código no seu CSS : 

.menu,.menu ul,.menu li,.menu a { margin: 0;padding: 0;border: none;outline: none;}.menu {height: 40px;width: 490px;margin-top:50px;background: #828282;-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: 1px dashed #393942;border-right: 1px dashed #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #bebebe; text-shadow: 1px 1px 1px 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: 40px;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; }

Modifique como quiser !

Por último vá em Design  Layout  Adicionar um Gadget   HTML/JavaScript

E cole isso :

<ul class="menu"><li><a href="LINK">Refresh</a></li><li><a href="LINK">About</a><ul><li><a href="LINK" class="LINK">About me</a></li><li><a href="LINK"
class="LINK">About the site</a></li></ul></li><li><a href="LINK">Contato</a><ul><li><a href="LINK" class="LINK">Ask box</a></li><li><a href="LINK"
class="LINK">Submit</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>

Onde está escrito LINK você coloca o URL da página que você quiser .

Gostaram ? *u*