Menu Sanfona

Oi gente, como pediram na Ask, eu procurei e achei no blog Mundo Blogger um tutorial fácil então confiram:
RESULTADO


1 - Procure a Tag ]]></b:skin> : e coloque o código a seguir antes dela:

 /* Menu Vertical Sanfona
----------------------------------------------- */
.verticalsanfona ul {
margin: 0;
padding: 0;
list-style:none;
width: auto;
}
.verticalsanfona ul li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: auto;
background-color:#f0f0f0;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalsanfona ul li h3 {
display:block;
margin: 0;
padding:10px;
padding-left:20px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:capitalize;
color: #000;
background: #cccccc url(ENDEREÇO-DA-SUA-IMAGEM) repeat;
text-align: left;
font-size:16px;
}
.verticalsanfona ul li h3 a{
color: #000;
}

.verticalsanfona ul li h3 a:hover{
color: #fff;
}

.verticalsanfona ul li div {
margin:0;
overflow: auto;
padding:10px;
padding-left:20px;
height:220px;
}

.verticalsanfona ul li:hover {
height: 280px;
}

.verticalsanfona:hover ul li:hover h3 {
color:#fff;
background: #000000 url(ENDEREÇO-DA-SUA-IMAGEM) repeat;;
}

.verticalsanfona ul li h3:hover {
cursor:pointer;
}

2 - Depois coloque esse código a onde quer que apareça:

<div class="verticalsanfona">
<ul>
<li>
<h3>Título 1</h3>
<div>Coloque aqui o conteúdo para o Titulo 1.</div></li>
<li><h3>Titulo 2</h3>
<div>Coloque aqui o conteúdo para o Titulo 2</div></li>
<li><h3>Titulo 3</h3>
<div>Coloque aqui o conteúdo para o Titulo 3.</div></li>
<li><h3>Titulo 4</h3>
<div>Coloque aqui o conteúdo para o Titulo 4</div></li>
</ul>
</div>

Não esqueça de mudar o ENDEREÇO-DA-SUA-IMAGEM.

Créditos: Mundo Blogger