como fazer um menu de links que desce ao passar o mouse

Atualizado 10.07.2014

Vocês querem saber como fazer este menuzinho?

Simples, abra o bloco de notas em seu computador (ou notepad).

Copie e cole este código abaixo em seu bloco de notas:

<div class="position-like"><div class="like-caixa">
<a class="conteudo-like" href="LINK AQ"> Editar </a>
<a class="conteudo-like" href="LINK AQ"> Editar </a>
<a class="conteudo-like" href="LINK AQ"> Editar </a>
<a class="conteudo-like" href="LINK AQ"> Editar </a>
</div>
<img src="http://i.imgur.com/WYtj1Mx.png" />
</div>
<style>
.conteudo-like {
display: block;
font-size: 8px;
font-family: 'Arial', sans-serif;
letter-spacing: 0;
margin-left: 1px;
margin-right: 1px;
background-repeat: no-repeat;
text-indent: 7px;
vertical-align: middle;
text-decoration: none;
line-height: 21px;
margin-bottom: 1px;
box-shadow: 0px 0px 1px #aeaeae;
padding: 0px;
border-top: 1px solid #fff;
background: #f5f5f5;
text-shadow: 1px 1px 1px #fff;
text-transform: uppercase;
color: #999;
}
.like-caixa {
background: rgba(248, 248, 248, 0.62);
padding: 10px;
text-align: just;
cursor: pointer;
}
.position-like {
top: -39px;
margin-left: 50px;
position: absolute;
transition: all 0.8s;
z-index: 1000;
}
.position-like:hover {
margin-top: 30px;
}
</style>

Agora você vai alterar os links, e se quiser mudar as cores (CSS), mas mudar as cores eu não vou ensinar e aqui no blog há vários tutoriais sobre CSS e tals.

Então, vamos lá... para mudar, alterar e adicionar links:

Observe este código de exemplo

 <a class="menu" href="http://#"> Nome do link </a> 

Mas aonde vou alterar?

Para colocar o link faça isso:

Simples em href="#" aonde tem o # você poe seu link sem "http://" porque eu ja coloquei ali né...

E depois em "nome do link" você poe o nome do link dãã, Hur dur.

Para adicionar você coloca uma tag depois da mesma tag, ou seja, depois do </a>

óóbviamente.

Falou!