Tutorial: Menú flotante 1

Hola como están? espero que bien. Bueno hoy les traigo un tutorial de un menú circular

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

1° Vamos a Diseño//Añadir Gadget// HTML Java Script
2° Pega el siguiente Código:

<style>
.tabs-MMCf {
overflow: hidden;
position: relative;
width: 165px;
height: 165px;
background:url(http://www.totallylayouts.com/backgrounds/vintage/white_floral.gif);  /* COLOR DE FONDO */
border-radius: 222px;
border: 5px solid #fff; /* BORDE DEL MENU */
padding: 3px;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 9px #;
-moz-box-shadow: 0px 0px 9px #c7c7c7;
box-shadow: 0px 0px 9px #000;
}
.tabs-MMCf li {
display: block;
padding: 10px;
width: 150px;
border: 1px solid transparent;
font: normal 13px georgia; /* TAMAÑO  FUENTE DE LETRA */
text-transform: uppercase;
line-height: 5px;
margin-left: -10px;
}
.tabs-MMCf li a {
color: #8b8b8b; /* COLOR DEL TEXTO */
text-decoration: none;
text-shadow: 0px 1px 0px #f4feff, 0px -1px 0px #f4feff, 1px 0px 0px #f4feff, -1px 0px 0px #f4feff;
}
.tabs-MMCf li:first-child {
margin-top: 20px;
}
.tabs-MMCf li:hover{
padding: 10px;
background: #fff; /* COLOR DE FONDO {hover} */
border: 1px dashed #39393A; /* BORDE DE LOS LINK {hover} */
border-radius: 222px;
}
</style>
<div style='position: fixed; top: 0px; left: 20px;'>
<ul class='tabs-MMCf'><center>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
<li><a href='Link'> Título </a></li>
</center></ul>
</div></style>

Créditos: Thecircus 

Actualizado el 27 de Febrero 2014

Creo que está bastante claro
Espero que les sirva :3