Menú animado logrado con CSS

De nuevo aquí, solo tú y yo ( ͡° ʖ ͡°)... en un nuevo tutorial. Esta vez les traigo un gran menú horizontal animado, todo logrado con CSS.

El efecto animado se aplica al momento de pasar el cursor por uno de los menús desplegables. Podrás ver como funciona viendo la Demo.

¿Grandioso efecto, no? ahora, pongámoslo en vuestros blogs.

Insertándolo en vuestros blogs

Nos dirigimos a Diseño, Añadir Gadget, seleccionamos el que dice HTML/Javascript y pegamos lo siguiente:

<style type="text/css">
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before, #menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;  
background: #444; background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3); }
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;  
}
#menu ul a {  
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0; border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent; }
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
</style>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
  <ul>
<li><a href="#">Creating Blogs</a></li>
<li><a href="#">Logo and Web Design</a></li>
<li><a href="#">SEO Optimization</a></li>
</ul>
  </li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
  <img width="32px" height="32px" title="MiniTrucos Blogger" style="float:right;margin:3px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7deZ_V3YHI-FpeAotdnNlTFvTSUT4fZhydSu099Al4OOmo68OxaU9kdYC6fQc3EgibX4rXWu2Ga3xe1T9SA6p2804IQgRbt3lGvSlKK-KRy7kGq6TDrJyCuxnU6zZ2JjWywIobvciOL4-/s1600/MTB.png"/>
</ul>

Lo que se encuentra en rojo lo deberás cambiar por el texto que deseas, mientras que lo de nosé tendrás que reemplazarlo por la URL a la que quieres que dirija.

Y lo pintado en narj está compuesto por atributos de la imagen que vez al final del menú. Solo podrás cambiar lo que se encuentra en negrita, es decir, estos:
   title: Es el texto que aparece al pasar el cursor por encima de la imagen.
   src: La URL de la imagen que quieres que aparezca.

Sin más que agregar, espero que hayan realizado los pasos con éxito. Hasta el siguiente tuto.