Hide menu com imagem

bom sem brincadeira delongas ou algo do tipo vamos ao tutorial:

''antes de aplicar esse codigo no seu template fasa o backup para evitar algum problema''
[Leia Mais]

procure por  </head> e cole ASIMA o codigo seguinte:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".l-corpo").hide();
$(".l-top").click(function(){
$(this).next(".l-corpo").slideToggle('fast');
}); }); </script>

procure por ]]></b:skin> agora cole asima o seguinte codigo:

.lista {
 margin:0px;
 padding:0px;
 width:130px; /*largura*/
 }
.l-top {
 cursor:pointer;
 position:relative;
 text-align:center;
 } 

.l-corpo {
 padding:10px;
 text-align:left;
 color: #000;  /*cor da fonte quando não tem link*/
 font-family:Verdana;
 font-size:11px;
 display:none;
 } 

.l-corpo a{
 color: #49aec0;  /*cor da fonte link*/
 text-decoration:none;
 }
.l-corpo a:hover{
 color: #fe5a27;  /*cor da fonte ao passar o mouse sobre o link*/
 text-decoration:none;
 }

No local que você deseja que o menu apareça é só adicionar o seguinte código: 

<div class="lista">
<img src="www.LINKDASUAIMAGEM" class="l-top">
<div class="l-corpo">
<center>
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a>
</center>
</div>
</div>