Menu Surprise

Bom, eu fiz esse menu com a medida da sidebar que esta em um blog de testes que eu uso. Então, se for usar, não mude as medidas. Só mude se souber um pouco sobre HTML, esse menu é bem bacana na minha opinião onde no estado hover o menu aparece frente a imagem como visto na demonstração abaixo.
Demonstração

Adicionando o CSS

Primeiro vá em Modelo> Editar HTML > Prosseguir > Ctrl+F e procure por:

]]
Apos encontra-lo adicione o seguinte código acima dessa tag: .caixa {
width: 180px;
background: #FFF;
padding: 3px;
font-family: 'play';
font-size: 12px;
text-align: justify;
line-height: 17px;
color: #777;}

#sidebar {
float: left;}

.menu {
display: inline-block;
width: 60px;
font-size: 15px;
text-transform: uppercase;
font-family: 'play';
background: #FFF;
padding: 3px;
margin-top: 3px;
text-align: center;
margin-left: -20px;
opacity: 0;
-webkit-transition-duration: 0.3s;}

.menusurprise {
position: absolute;
margin-left: 0px;
width: 183px;
margin-top: 10px;
height: 219px;
background: transparent;}

.menusurprise:hover .menu {opacity: 1; margin-left: 10px; opacity: 0.5;}
.menusurprise:hover .menu:hover {opacity: 1; margin-left: 10px; opacity: 0.9;}

Aplicando o menu

Adicione o seguinte código HTML onde deseja que seu menu apareça: <div id="sidebar">
<div class="menusurprise">
<a href="URL LINK" class="menu">home</a> <br>
<a href="URL LINK" class="menu">about</a> <br>
<a href="URL LINL" class="menu">other</a> <br>

<a href="/" class="menu">bye</a>
</div>
<div class="caixa">
<img src="URL DA SUA IMAGEM" width="180">

</div></div>