Tutorial: menu flotante

Holi bloggeros/as! hoy estaba muy pero muyy aburrida y quise aser
un menu,hiper kawaii asi que les voy a dejar la "VISTA PREVIA"
para que vean si les gusta.Okey lo premero que tienen que aser es...

• Ir a un  HTML/JavaScript
• Y por ultimo agregar este codigo:

<style>
.tabs-MMCf {
overflow: hidden;
position: relative;
width: 165px;
height: 165px;
background:url(https://40.media.tumblr.com/8cf519d3edfb1f37c66479ca8b908a55/tumblr_namqbjx7v71reqr1ho1_r2_500.jpg);  /* 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>