Tutorial: Menú tres categorías

Hola hoy les traigo un nuevo tutorial, no sé si me explico con el título pero bueno...


Comencemos

P·R·E·V·I·E·W

1° Vamos a Diseño//Añadir un Gadget//HTML Java Script

Y pegamos:

<style>
.kev{
width:15px;
display:inline-block;
position:fixed;
color:#fff;
text-align:center;
text-decoration:none;
padding-top:70px;
font-family:tt;
-webkit-border-bottom-right-radius: 55px;
-webkit-border-bottom-left-radius: 55px;
-moz-border-radius-bottomright: 55px;
-moz-border-radius-bottomleft: 55px;
border-bottom-right-radius: 55px;
border-bottom-left-radius: 55px;
font-size:8px;
}

#ones{
background:#b3db29;
height:200px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
top:0px;
left:850px;}

#ones:hover{
height:250px;}

#twos{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#FF8585;
height:250px;
top:0px;
left:870px;}

#twos:hover{
height:300px;}

#tris{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#02b3fe;
height:290px;
top:0px;
left:890px;}

#tris:hover{
height:320px;}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style>

<a class="kev" id="ones" href="Link">T<br/>í<br/>t<br/>u<br/>l<br/>o<br/></a>
<a class="kev" id="twos" href="Link">T<br/>i<br/>t<br/>u<br/>I<br/>o<br/></a>

<a class="kev" id="tris" href="Link">T<br/>í<br/>t<br/>u<br/>l<br/>o<br/></a>

Celeste: Color de letra
Lila: Color de fondo 
Amarillo: Link de página o entrada

Actualizado el 27 de Febrero 2014

Eso es todo ojalá les sirva