CupCake Fake

#lollipop{
-webkit-transition-duration: 1.0s;
font-family:'Play';
font-size:12px;
}
#lollipop .color1 a{
background:#616161;
display: block;
padding:5px 210px 5px 7px;
position:absolute;
-webkit-transition-duration: .50s;
color:#fff;
text-shadow:1px 1px 0px #414040;
border:1px solid #5c595a;
-moz-box-shadow: inset 0 0 10px #414040;
-webkit-box-shadow: inset 0 0 10px #414040;
box-shadow: inset 0 0 10px #414040;
}
#lollipop .color1 a:hover{
background:#646363;
display: block;
padding:5px 210px 5px 7px;
margin-left:-5px;
position:absolute;
-webkit-transition-duration: .50s;
color:#fff;
text-shadow:1px 1px 0px #414040;
}

2. Vá até um gadget de HTML/JavaScript e cole:

<div id="lollipop">

<div class="color1"><a href="seulink.com">Nome do Link</a></div> <br />

</div>



Você verá sua 'linha' pronta. Para fazer a segunda de outra cor, você precisa fazer o tutorial por duas vezes. Troque o color1 por color2 e configure como quiser. Lembre-se de que irá precisar posicionar manualmente, o menu não fica um embaixo do outro. Para ficar, adicione nas outras vezes:

margin-top: 12px;




E configure até achar a posição desejada.

Obs:Veja se ficou do seu jeito antes de salvar