Menu lateral com hover

Meu primeiro post de hoje ,trago aqui um menu lateral com hover quando passa rato cima ,exemplo na imagem acima ,e pode ver online:   MENU AQUI  ...Terminei de personalizar e trouxe logo aqui para vc.
Vc pode personalizar sua maneira e ai fica como vc gosta.
Espero que goste e que tenha bom uso dele.Vamos começár a instalação deste menu lateral...

ANTES DE TUDO FAÇA UMA CÓPIA DO SEU TEMPLATE...

Entre no modelo do seu blog depois clik em html e vamos colocar css nele.
Procure este código e acima dele coloque meu código do blockquote.

#bt-menu{
width:195px;
}
#bt-menu ul{
list-style:none;
}
#bt-menu li{
list-style:none;
width:265px;
height:30px;
margin:5px 0;
display:block;
}
#bt-menu li a{
list-style:none;
display:block;
color:#00b3b3;
font-weight:bold;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
line-height:30px;
text-indent:15px;
}
#bt-menu li a:hover{
background:url(http://i.imgur.com/ZXbwIjC.png?3) no-repeat;
text-decoration:none;
}
#bt-menu li .current{
list-style:none;
display:block;
background: url(http://i.imgur.com/2K1fphB.jpg?1) repeat-x left;
color:#00b3b3;
text-transform:uppercase;
text-decoration:none;
}
#bt-menu li a.current, #bt-menu li a:hover.current{
background: url(http://i.imgur.com/ZXbwIjC.png?3) repeat-x left;
color:#8d2373;
text-decoration:none;
}

Pode salvar e vamos colocar html,adicione um gadget html/javascript e cole este código nele:

<ul id="bt-menu">
<li .bt-current>
<span>
<a href="seu link aqui" class="current">INICIO
</a>
</span>
</li>
<li>
<span>
<a href="seu link aqui">lazer
</a>
</span>
</li>
<li>
<span>
<a href="seu link aqui">ajuda
</a>
</span>
</li>

 <li>
<span>
<a href="seu link aqui">indice
</a>
</span>
 </li>

<li>
<span>
<a href="seu link aqui">contacto
</a>
</span>
</li>
</ul>

Agora salve e veja como ficou ,escolha sitio de sua sidebar onde quer ele fique...

Os créditos onde encontrei :  dynamicdrive  meu agradecimentos ...

Para personalizar encontre estes códigos:

color:#00b3b3; cor da letra
color:#00b3b3;  cor letra
color:#8d2373;  cor letra
background:url(http://i.imgur.com/ZXbwIjC.png?3) no-repeat;     imagem do menu
background: url(http://i.imgur.com/2K1fphB.jpg?1) repeat-x left;   imagem menu
background: url(http://i.imgur.com/ZXbwIjC.png?3) repeat-x left;  imagem menu
Escolha as suas caso queira mudar .

Irei trazer outros menus numa próxima postagem,duvidas disponha sempre ,até mais ...

Menu lateral com hover

► 0

► menus

► Cartita