Menu Hover Solid

Yoo ~ 

Bom, estava conversando com a Kaori e ela me aconselhou a postar mais tutoriais, minhas edições não são tão boas quanto as da Bianca e as da Kaah. O melhor ainda é que eu sou muito melhor na parte de HTML, facilitando ainda mais meu trabalho aqui no Kawaii World além de ser muito útil para várias blogueiras. Não se vocês, mas estou sentindo falta de tutos aqui .

Meu objetivo é trazer mais menus feitos de Tumblrs de HTML, que cada vez mais blogueiras usam coisas de lá. Então eu transformarei esses códigos para vocês, mandem sugestões na ask de menus para serem postados aqui, irei avaliar se realmente pode ser útil para vários blogs.

Bem, eu trouxe um menu muito legal para vocês, sendo muito bom para ser usado na sidebar. Créditos ao tumblr Htmlife, veja uma preview clicando bem aqui . Vale muito apena aprender não é? 

Enjoy ~

Vá em seu HTML, dê um CTRL + F  e procure por ]]></b:skin>. Acima da tag, cole:

.menub{

background:#fd90d0; /* cor de fundo */

font-family: Tahoma; /* fonte */

 width: 60%;  /* largura */

float: right;

padding: 2px;

text-align: center;

margin: 1px;

border-radius: 0px;

font-size: 8pt; /* tamanho da fonte */

color: #BC8F8F; /* cor da fonte */

-webkit-transition-duration: .90s;

-moz-transition-duration: .90s;

transition-duration: .90s;

}

.menub:hover {~

font-family: Tahoma; /* fonte ao passar o mouse */

width:60%; /* largura ao passar o mouse */

float: right;

background:#ebebeb; /* cor de fundo ao passar o mouse */

padding: 2px;

text-align: center;

margin: 1px;

border-radius: 0px;

font-size: 8pt; /* tamanho da fonte ao passar o mouse */

color: #696969; /* cor da fonte ao passar o mouse */

padding-left:0px;

box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */

-moz-box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */

-webkit-box-shadow:7px 8px 16px #fff inset, -3px -8px 4px #ebebeb inset;/* sombra interna, altere o que está em negrito */

border-bottom:2px solid#eee; /* borda de baixo ao passar o mouse */

}

No próprio código tem a explicação, para usar adicione um gadget HTML/Javascript e altere no necessário:

<div class="menub"><a href="link">Título</a></div>

<div class="menub"><a href="link">Título</a></div>

<div class="menub"><a href="link">Título</a></div>

<div class="menub"><a href="link">Título</a></div>

Pronto !