Menu com sub legenda com cor pastel

Bom povo,fiz um menu prontinho para vocês usarem (demorou muito pra fazer) mas então valeu a pena fazer,ficou bem legal e você pode editar facilmente utilizando o Html e o CSS mas eu vou explicar tudinho.
Eu preparei tudo e deixei da forma que eu queria,caso você não gostou da cor do texto (que ficou muito branca) você pode alterá-la da seguinte forma: procure por color:#fff; no css que estará dentro da tag <style> ou </style> e mude a cor hexadecimal *FFF* por outra cor em inglês ou hexadecimal,exemplo:
Black ou #000

Vamos lá,copie o código abaixo e pressione as teclas windows + r do seu teclado e digite notepad e dê enter,vai abrir o bloco de notas e você cola o código!

<div id="Menu-informativo">
<div id="home">
<a href="#">Home</a>
</div>
<div id="info1">
Vá para a página inicial.
</div>
<div id="sla01">
<a href="#">Primeiro sla</a>
</div>
<div id="info2">
Vá para o primeiro sla.
</div>
<div id="sla02">
<a href="#">Segundo sla</a>
</div>
<div id="info3">
Vá para o segundo sla.
</div>
<div id="sla03">
<a href="#">Terceiro sla</a>
</div>
<div id="info4">
Vá para o terceiro sla.
</div>
<style>
#sla03 a{
color: #fff;
text-decoration: none;
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
#info4{
background: #D3E6C1;
color: #fff;
font: 11px Tahoma;
padding-left: 6px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 5px;
}
#sla03 {
color: #fff;
font-size: 16px;
text-decoration: none;
background: #E4F3C8;
max-height: 30px;
padding: 6px;
min-height: 30px;
margin-bottom: -14px;
}
#info2 {
color: #fff;
background: #CECBDE;
font: 11px Tahoma;
padding-left: 6px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 5px;
}
#sla01 {
color: #FDB5A7;
font-size:16px;
text-decoration: none;
background: #E7E3F9;
max-height: 30px;
padding: 6px;
min-height: 30px;
margin-bottom: -14px;
}
#sla01 a{
color: #fff;
text-decoration: none;
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
#home a{
color: #fff;
text-decoration: none;
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
#home {
color: #FDB5A7;
font-size:16px;
text-decoration: none;
background: #E2E2E2;
max-height: 30px;
padding: 6px;
min-height: 30px;
margin-bottom: -14px;
}
#info1 {
color: #fff;
background: #CACACA;
font: 11px Tahoma;
padding-left: 6px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 5px;
}
#sla02 {
color: #FDB5A7;
font-size:16px;
text-decoration: none;
background: #F5E9DE;
max-height: 30px;
padding: 6px;
min-height: 30px;
margin-bottom: -14px;
}
#sla02 a{
color:#fff;
text-decoration: none;
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
#info3 {
color: #fff;
background:#F3E4D7;
font: 11px Tahoma;
padding-left: 6px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 5px;
}
</style>

Renomear link e colocar o link no menu...
Vamos primeiro aprender a renomear e mudar os links,por exemplo, no código encontramos a seguinte coisa:
<a href="#">Home</a>
dentro das aspas está um jogo da velha *#*,substitua para o link que você deseja e não se esqueça de colocar o http://.......... exempo: http://www.google.com.br/,entendeu ?
e onde está escrito Home você põe o texto que deseja aparecer,assim como são nos outros links,você muda tudo.

Renomear a legenda do menu
Renomear a legenda do menu é a coisa mais fácil a ser feita aqui,temos então a tag:

<div class="info1">

Vá para a página inicial.

</div>

como podemos alterar a legenda? Simples, dentro da tag tem algo escrito em português: Vá para ... e então você renomeia pelo que desejar!

Adicionando mais links no menu
Para adicionar mais links em seu menu,copie esse código e cole antes de <style> :

<div id="home">

<a href="#">Home</a>

</div>

<div id="info1">

Vá para a página inicial.

</div>

E é só editar conforme desejar,vai copiando e colando os próximos códigos,assim,fica colorido e no padrão do menu.

Fim.

Tem esse modelinho também:

<div id="menucandy">
<li><a href="#">Início</a></li>
<div id="litxt">Vá para o início</div>
<li><a href="#">Sobre</a></li>
<div id="litxt">Vá para o Sobre</div>
<li><a href="#">Contato</a></li>
<div id="litxt">Vá para o contato</div>
<li><a href="#">Portifólio</a></li>
<div id="litxt">Vá para o início</div>
</div>
<style>
#menucandy {
text-align: center;
background: #e8d8d7;
padding: 8px;
padding-top: 4px;
}
#litxt {
color: #aeaeae;
background: #f2e9de;
font-family: arial;
margin: 0 -8px 3px;
text-align: center;
font-size: 10px;
}
#menucandy a{
text-decoration:none;
color: #8B8B8B;
font-family:arial;
font-size:15px;
}
#menucandy li {
list-style:none;
}
</style>