Menú vertical desplegable con el CSS3

Menú vertical desplegable con el CSS3 .

Cada vez se pueden hacer mas maravillas con el CSS3, es cuestion de experimentar e ir probando, sobre todo a los que les guste el diseño web.
En esta ocasion, he encontrado este menu vertical en el que solo se ve una pestaña, pero que al posar el cursor sobre ella, se despliega como si fuera de papel.
Para realizar estos efectos, he utilizado las propiedades 'perspective', 'transform' y 'linear-gradient', entre otras.

Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imagenes en formato png transparente.
El resultado es un menu original y visualmente atractivo, como podeis ver.
Para ponerlo en vuestro blog o web, tan solo teneis que copiar el siguiente codigo y ponerlo en un gadget HTML.
Modificais lo siguiente para adaptarlo a lo que querais enlazar a vuestro gusto:

Lo que esta en color rojo son las direcciones (urls), lo que esta en color verde es el texto de los enlaces y lo que esta en color violeta son las urls de las imagenes de los iconos.

<div class="menudesplegable"><a class="main">Menu</a><div class="sub first"><img src="http://png-4.findicons.com/files/icons/1254/flurry_system/32/home.png"><a href="https://fmgtemporal.blogspot.com/"><p><span>Inicio</span></a></p><div class="sub even"><img src="http://png-5.findicons.com/files/icons/2352/frankfurt/32/contact.png"><a href="https://fmgtemporal.blogspot.com/"><p><span>Contacto</span></a></p><div class="sub odd">
<img alt="" src="http://png-4.findicons.com/files/icons/653/the_spherical/32/web.png"><a href="https://fmgtemporal.blogspot.com/"><p><span>Webs Amigas</span></a></p><div class="sub even">
<img alt="" src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/layout_content.png"><a href="https://fmgtemporal.blogspot.com/"><p><span>Contenido</span></a></p><div class="sub odd last">
<img alt="" src="http://png-5.findicons.com/files/icons/753/gnome_desktop/32/gnome_emblem_photos.png"><a href="https://fmgtemporal.blogspot.com/"><p><span>Banners</span></a></p></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menudesplegable .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.16, rgb(0,102,153)),
color-stop(0.58, rgb(0,0,0))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style>

Si queréis hechar un vistazo al Menú podéis ie a mi bloc de demos y verlo en acción en la barra del sidebar arriba de todo.