Como fazer menu Arrow

O menu é esse abaixo:
Título 1 Título 2 Título 3 Título 4 Título 5 Título 6


Coloque esse código em seu css depois de <style> e antes de </style>

.linsweet {
width: 60px;
height: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
line-height: 60px;
font-size: 9px;
letter-spacing: 1px;
display:block;
text-align: center;
font-family: #83735b;
background-color: #ede8dd;
text-transform: lowercase;
overflow: hidden;
color: {color:custom text};
float: left;
margin-bottom: 5px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear; 
}




.linsweet:hover {
background-color: #e1dad2;
color: #FFFFFF;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg) ;
}
E esse código você coloca onde quiser que apareça o menu:

 <a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a> 
<a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a> 
<a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a>
<a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a>
<a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a>
<a href="SEU LINK AQUI" class="linsweet">TÍTULO DO LINK AQUI</a>  

Por: Pâmela Sampaio em 28/04/14
Não copiem o tutorial e se for útil, deem os créditos!
Facebook Twitter Pinterest Google+ Email Addthis