PASOS:

PARTE 1:

CLIC EN:

DISEÑO/MULTICOLUMNAS/AGREGAR GADGET/HTML JAVASCRIPT. Pegar los códigos

<ul id="ybmenud">

<li> SEMANA1

<ul>

<li><a href="#">ENSAYIS 1</a></li>

<li><a href="#">Sub-categoría 1-2</a></li>

<li><a href="#">Sub-categoría 1-3</a></li>

<li><a href="#">Sub-categoría 1-4</a></li>

</ul>

</li>

<li> semana1

<ul>

<li><a href="#">tema1</a></li>

<li><a href="#">Sub-categoría 1-2</a></li>

<li><a href="#">Sub-categoría 1-3</a></li>

</ul>
</li>

<li> Recursos de Aprendizaje

<ul>

<li><a href="#">clase-1</a></li>

<li><a href="#">Sub-categoría 1-2</a></li>

<li><a href="#">Sub-categoría 1-3</a></li>

</ul>

</li>

<li> Recursos de Aprendizaje

<ul>

<li><a href="#">clase-1</a></li>

<li><a href="#">Sub-categoría 1-2</a></li>

<li><a href="#">Sub-categoría 1-3</a></li>

</ul>

</li>

</ul>
Parte 2

PASOS

DISEÑO/DISEÑADOR DE TEMAS/OPCIONES AVANZADAS/AGREGAR CSS. Pego el código2

/* menu desplegable para blogger yoblogueo.com*/

.tabs-inner .widget ul#ybmenud {

text-align: left;

display: inline;

margin: 0;

padding: 15px 4px 17px 0; /* espacio de padding de los botones del menú */

list-style: none;

border:none;

.tabs-inner .widget ul#ybmenud li {

font-size: 12px/18px; /* tamaño de fuente de tu menu */

font-family: sans-serif; /* fuente de tu menu */

display: inline-block;

margin-right: -4px;

position: relative;
padding: 15px 20px;

background: #FF5833; /* color de fondo de tu menu */

float:none;

cursor: pointer;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

.tabs-inner .widget ul#ybmenud li a {

padding:0;

font-family: sans-serif; /* letra para los links del menu */

border:0;

.tabs-inner .widget ul#ybmenud li:hover {

background: #94b1b4; /* color de fondo para cuando pasas el ratón por encima del botón de la

barra */

color: #fff; /* color de la letra cuando pasar con el ratón por encima */
}

.tabs-inner .widget ul#ybmenud li:hover a {

background: transparent;

color: #fff; /* color de la letra cuando pasar con el ratón por encima */

.tabs-inner .widget ul#ybmenud li ul {

z-index:1000;

border:none;

padding: 0;

position: absolute;

top: 45px;

left: 30px;

float:none;

width: 150px;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

display: none;

opacity: 0;
visibility: hidden;

-webkit-transiton: opacity 0.2s;

-moz-transition: opacity 0.2s;

-ms-transition: opacity 0.2s;

-o-transition: opacity 0.2s;

-transition: opacity 0.2s;

.tabs-inner .widget ul#ybmenud li ul li {

background: #94b1b4; /* color del fondo de las pestañas del sub-menu */

display: block;

color: #fff; /* color de la letra de los sub-menus */

text-shadow: 0 -1px 0 #000;

ul#ybmenud li ul li a{

color:#fff /* color de los links de los submenus */

.tabs-inner .widget ul#ybmenud li ul li:hover {

background: #a9bcbe; /* color de fondo cuando pasas el ratón sobre el sub menu */

}
.tabs-inner .widget ul#ybmenud li:hover ul {

display: block;

opacity: 1;

visibility: visible;