Simple Drop Down con CSS3

 Un menú es un elemento muy útil para los bloggers que poseen un blog con gran variedad de entradas para ofrecer a los usuarios.

En lo personal me fascina el aspecto de este menú ya que cumple con muchas funciones que lo hace único. logrado con CSS3 y efecto de desvanecimiento al pasar el cursor.

Demo

Ya que con CSS funciona, tendremos que hacer algunos cambios en nuestra plantilla.
Nos dirigimos a Plantilla, Editar HTML, adentro presionamos CTRL+F y buscamos:

 ]]></b:skin>

Y antes pegamos el código siguiente:

 /* The CSS Code for the menu starts here bloggertrix.com brought to you by novedadblogger.net */
.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.btrix_menu { 
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.btrix_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.btrix_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }

.btrix_menu li:hover > a { color: #8fde62; }

.btrix_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.btrix_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUddT1uAVKyAK9QlES9z6TlbelDf8i0aU7Gi2OtdmhSkuuIguf8R_58UI5oAziv3dLZZsENmIBul5JTjfLIc8UBaGj08ldHODYJZLDQV8IXy01jpG9hDcdZ2pji-_UW6mU7E0449wx9eh/s1600/docs.png) no-repeat 6px center; }
.btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cWVT0ujd0ohAbVR4iG9BmB3gQtHm658MyKtP_hO48hX9uDjABl1N60t6C5xP7gZkBkkZYyV_yIRkoeQL-yyWb7SH6Su2traqCuqh_0IoQUupQBhwUGNeU6X8-A4adw2NoMuWVPjIWsJa/s1600/bubble.png) no-repeat 6px center; }
.btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUXKhTgun_TnCTVRtPR7wfLTD-SLCCNEJ8CjyO-dXg07LYt6bjzN3_V8r1uaULA26eu_h7TgTM8DytZ7OYoGaxvSZ8VZC9kjNGPwU_PgDjUdbdIanl50cBVz54NBTnXUtjPZ7SdZpB8HQ/s1600/arrow.png) no-repeat 6px center; }

Ahora puedes guardar los cambios y redirigirte a Diseño, Añadir Gadget, HTML/Javascript y pegamos: 

 <ul class="btrix_menu">

 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>

  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>

 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="#">Contact us</a></li>
</ul>

En el primer código se ha coloreado de color rojo las URLs de la imagen que se verá junto al título del menú despleglable.

Deberás reemplazar en el segundo código lo resaltado en naranja por un link.
Lo de azul indica el título del menú.

Vía/BloggerTrix