MENU Desplegable Sencillo #CODIGO / #GADGET

Hola!:D en este post te traigo un  menu muy bonito ^_^ no olvides que este blog es totalmente dedicado a la personalizacion para tu blog compartiendo cosas muy utiles para tu diseño :D gracias por tu visita.

Primero vamos a TEMA // EDITAR HTML y presionamos CTRL + F para abrir el cuadro de busqueda en el cual buscaremos: ]]></b:skin> 

& pegaremos antes de ese codigo o arriba el siguiente otro codigo:

#menuii {background:#d09dff;
padding:7px;
width:230px;
display: inline-block;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-radius:5px;
text-align:center;
}
#menuii:hover #categorii {
opacity:3;
-webkit-transition-duration:.7s;
overflow:hidden;
z-index:966666666666666666666666666666666666666669;
height:auto;
}
#categorii {
font-family: calibri;
font-size: 17px;
margin-top:1px;
margin-left: -7px;
position:absolute;
overflow:hidden;
line-height: 20px;
padding: px;
opacity:0;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
width:250px;
}
#categorii a{
background:#c0e5fa;
color: #fff;
width:244px;
text-align:center;
display:block;
line-height: 20px;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-top:3px solid #fff;
}
#categorii a:hover{
color:#d48bc2;
background: #000000;
opacity:100; transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}

En este codigo solo modificaremos la parte del principio #d09dff que es el color del boton principal, luego el otro color #c0e5fa que es el tono de los botones del submenu y  #d48bc2 que es el color del texto cuando esta el puntero encima, en donde dice: background: #000000 pondremos el color del fondo del boton con el puntero señalando Y daremos clic en el BOTON de GUARDAR que es de color naranja.

Ahora vamos a DISEÑO /  AÑADIR GADGET HTML y pegamos dentro el siguiente codigo:

 <div class="separator" style="clear: both; text-align: center;">
<div id="menuii">CATEGORIA
<div id="categorii">
<a href="Link">Nombre</a>
<a href="Link">Nombre</a>
<a href="Link">Nombre</a>
<a href="Link">Nombre</a>
</div></div></div>

Para agregar mas secciones solo debemos poner mas codigos exactamente iguales