INCORPORAR MENU DESPLEGABLES EN EL BLOG

Paso N° 1
Estando en la pantalla de diseño del blog seleccionamos:

(Tema, clic en los tres puntos verticales, luego Editar HTML, dentro del
código html presionamos la teclas

Esta es la pantalla de diseño del blog

2º Tres puntos
verticales

1º
tema

En esta
pantalla
CTRL + F

Buscamos en siguiente código:

<div class='region-inner header-inner'>
Cambiamos los siguientes valores debe quedar así en la programación del blog
(maxwidgets=´10´ showaddelement=´yes´
Locked=´false´)
Paso N° 2 (Crear los Menús y Sub Menús)

(Diseño, en todas las columnas añadir un Gadget,HTML Javascript) copiamos alli la

codificación (arreglar la estructura del menú de acuerdo a su interés cambiando los datos
que se te presentan en la siguiente programación)

<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='#'>INICIO</a>
</li>
<li>
<a href='#'>AREA DE MATEMATICA</a>
<ul>
<li><a href='#'>Enfoque del área</a></li>
<li><a href='#'>Competencias del área</a></li>
</ul>
</li>
<li>
<a href='#'>PLANIFICACION CURRICULAR</a>
<ul>
<li><a href='#'>Programaciòn Anual</a></li>
<li><a href='#'>Unidad de Aprendizaje</a></li>
<li><a href='#'>Proyecto de Aprendizaje</a></li>
<li><a href='#'>Experiencia de Aprendizaje</a></li>
</ul>
</li>
<li>
<a href='#'>DIAGNOSTICO DEL AREA</a></li>
<li>
<a href='#'>RESULTADOS ECE</a> </li>
<li>
<a href='#'>RECURSOS</a>
<ul>
<li><a href='#'>Ficha 1</a></li>
<li><a href='#'>Ficha 2</a></li>
<li><a href='#'>Ficha 3</a></li>
<li><a href='#'>Ficha 4</a></li>
</ul>
<li>
</ul>
</div>

Paso N° 3
(nuevamente seleccionamos TEMA en el blog, clic en puntos verticales Editar
HTLM,
Control + F)

Buscamos en siguiente código:

]]></b:skin> ó /b:skin

Copiamos en siguiente código encima de la línea encontrada:

/**MBW Navgation bar**/

#mbwnavbar {
background: #bdbfbf;
width: 900px;
color: #d8f602;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #023d90;
color: #0a0a0a;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav
li.sfhover ul ul ul { left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover
ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #023d90;
width: 150px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Bibliografía
Adaptado de la pagina de youtube.com
https://www.youtube.com/watch?v=mJa0R22WKTE&t=8s

pagina de colores
https://www.colorhexa.com/

copiar el codigo del color en la programacion