Para poder poner este menú tenéis dos códigos un CSS y HTML
Primero colocáis el código CSS que hemos llamado gris por los colores y si un día queréis desinstalarlo podre localizar el código CSS para eliminarlo :
Para pegar este código vais a plantilla editar HTML. y antes de ]]></b:skin> lo pegáis.
/*----- menu gris -----*/
ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}
/*----- fin menu gris -----*/
Aquí podéis cambiar los colores, tamaño de letra etc.
Luego en diseño añadir HTML JAVASCRIPT, pegáis el siguiente código
<ul class="acorh">
<li><a href="#">PRIMERO</a>
<ul>
<li><a href="URL">línea 1.1</a></li>
<li><a href="URL"> línea 1.2</a></li>
</ul>
</li>
<li><a href="#">SEGUNDO</a>
<ul>
<li><a href="URL">línea 2.1</a></li>
<li><a href="URL"> línea 2.2</a></li>
<li><a href="URL"> línea 2.3</a></li>
</ul>
</li>
<li><a href="#">TERCERO</a>
<ul>
<li><a href="URL"> línea 3.1</a></li>
<li><a href="URL"> línea 3.2</a></li>
<li><a href="URL"> línea 3.3</a></li>
<li><a href="URL"> línea 3.4</a></li>
</ul>
</li>
</ul>
Aquí podéis sustituir PRIMERO, SEGUNDO etc. por el nombre que queráis así como todas línea 1.1y en URL poner la url que queréis que os direccione, podéis añadir mas,
<li><a href="URL"> línea 3.4</a></li>,
siempre antes de </ul>de cada estructura o un cuarto párrafo, antes de </ul> final
<li><a href="#">CUARTO</a>
<ul>
<li><a href="URL"> línea 4.1</a></li>
<li><a href="URL"> línea 4.2</a></li>
<li><a href="URL"> línea 4.3</a></li>
<li><a href="URL"> línea 4.4</a></li>
</ul>
</li>
