Menú desplegable en Blogger for dummies

Crear un menú desplegable para Blogger como el que yo tengo en Cenizas del Caos es relativamente sencillo, incluso si no tenemos ni la más mínima idea de informática. Bueno, sin la más mínima no tendríamos un blog, claro, pero ya me entendéis. Lo primero es integrar el menú en Blogger con código HTML. Aquí tenéis el código base que tenéis que pegar en Diseño-> Añadir gadget -> HTML

 <nav id="menu_gral">
  <ul>
    <li><a href="#">Opción 1</a>
        <ul>
       <li><a href="#">Opción 1.1</a></li>
       <li><a href="#">Opción 1.2</a></li>
       <li><a href="#">Opción 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 2</a>
        <ul>
       <li><a href="#">Opción 2.1</a></li>
       <li><a href="#">Opción 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 3</a></li>
    <li><a href="#">Opción 4</a>
        <ul>
       <li><a href="#">Opción 4.1</a></li>
       <li><a href="#">Opción 4.2</a></li>
       <li><a href="#">Opción 4.3</a></li>
        </ul>
    </li>
  </ul>
</nav>

   

 

Después basta con sustituir los “#” con la URL que queráis que aparezca al hacer click en las categorías (lo podéis organizar usando las etiquetas) y “Opción X” por el texto que queráis que se muestre. Para haceros una idea yo tengo sustituido Opción 1 por Literatura y en la URL la que corresponde a la etiqueta del mismo nombre. ¿Sencillo, no?

Ahora sólo queda entrar en Plantilla->Avanzado->Añadir CSS y pegar el siguiente código:

#menu_gral li ul {

    position: absolute;

    width: 0;

    overflow: hidden;

}

#menu_gral li:hover ul, #menu_gral li:focus ul {

    width: 100%;

    z-index: 5;

    margin: 0 -4rem -4rem -4rem;

    padding: 0 4rem 4rem 4rem;

    background:  none;

}

¡Y listo! Así de sencillo. Si queréis entender cómos y por qués o domináis un poco HTML y CSS y queréis aplicarle algún otro diseño o estilo de todos los tutoriales y guías que podéis encontrar por Internet, que son muchas, yo os recomiendo esta.