HTML<div class="menuContent">
 <ul id="nav"> <li><a href="http://fondogifflashgloriav.ek.la/esquinas-originales-c25640838"><img src="images/t1.png" alt="" /> Esquinas originales</a></li> <li><ul id="1"><li><a href="#"><img src="images/empty.gif" alt="" />Link 1</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 2</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 3</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 4</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 5</a></li></ul><a class="sub" tabindex="1" href="#"><img src="images/t2.png" alt="" />HTML/CSS</a></li><li><ul id="2"><li><a href="#"><img src="images/empty.gif" alt="" />Link 6</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 7</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 8</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 9</a></li><li><a href="#"><img src="images/empty.gif" alt="" />Link 10</a></li></ul><a class="sub" tabindex="1" href="#"><img src="images/t3.png" alt="" />jQuery/JS</a></li><li><a href="#"><img src="images/t2.png" alt="" />PHP</a></li></ul></div>

CSS.menuContent {
 background-color:#FFF;
 background-image: -moz-linear-gradient(center top, #FFF,#FFF, #FFF, #ddd);
 background-image: -webkit-gradient(linear, center top,center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd));
 border:1px solid #C7C7C7;
 bottom: 70px;
 left: 300px;
 padding: 0 15px 5px;
 position: fixed;
 width:520px;
 
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 -moz-box-shadow: 3px -3px 5px #B8B8B8;
 -webkit-box-shadow: 3px -3px 5px #B8B8B8;
 box-shadow: 3px -3px 5px #B8B8B8;
 }

 .menuContent a.slider {
 background-color:#fff;
 background-image: -moz-linear-gradient(center top , #ddd,#FFF);
 background-image: -webkit-gradient(linear, center top,center bottom, from(#ddd), to(#FFF));
 border: 1px solid #C7C7C7;
 border-bottom:none;
 cursor: pointer;
 float:right;
 height: 8px;
 margin:-15px 30px 0 0;
 padding:3px 20px;
 width: 8px;
 z-index: 2001;
 
 -moz-border-radius-topright: 7px;
 -moz-border-radius-topleft: 7px;
 border-top-right-radius: 7px;
 border-top-left-radius: 7px;
 -moz-box-shadow: 3px -2px 3px #B8B8B8;
 -webkit-box-shadow: 3px -2px 3px #B8B8B8;
 box-shadow: 3px -2px 3px #B8B8B8;
 }
 
 .menuContent a.slider img { padding-bottom: 3px;
 }
 
 #nav {
 list-style: none;
 }
 
 #nav li {
 display: inline-block;
 margin: 10px;
 } 
 #nav li a {
 border: 1px solid #ccc;
 color:#858585;
 display: block;
 padding: 5px 10px;
 text-align:center;
 text-decoration:none;
 width: auto; 
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-topleft: 10px;
 border-bottom-right-radius: 10px;
 border-top-left-radius: 10px;
 }
 
 #nav li a:hover, #nav li a.active {
 background-color:#ddd;
 }
 
 #nav li ul {
 display:none;
 }
 
 #nav li ul li {
 margin: 5px 0;
 display: block;
 } 
 #nav li a img {
 border-width: 0px;
 margin-right: 8px;
 vertical-align: middle;
 } 
 #nav ul li a img {
 background: url("../images/bulb.png") no-repeat;
 border-width:0px;
 height:16px;
 line-height:22px;
 margin-right:5px;
 vertical-align:middle;
 width:16px;
 }

HTML<ul id="ulmenu1" class="ulmodule_menu"> <li id="module_menu143430540" class="module_menu module_menu_type_html" data-id="143430540"> <div id="module_menu_titre143430540" class="module_menu_titre">&nbsp;</div> <div id="module_menu_contenu143430540" class="module_menu_contenu"> <div class="module_menu_contenu_block"><ul class="list-menu"><li><a href="http://tutorialgloriav.eklablog.com/bienvenido-c26002526">Bienvenido</a></li><li><a href="http://tutorialgloriav.eklablog.com/color-rgb-hex-c26005604">Color RGB HEX</a></li> <li><a href="http://tutorialgloriav.eklablog.com/imagen-c26001612">Imagen</a><ul><li><a href="http://tutorialgloriav.eklablog.com/imagen-en-movimiento-c26005670">Imagen en movimiento</a></li><li><a href="http://tutorialgloriav.eklablog.com/imagen-efectos-c26001614">Efectos</a></li> </ul></li><li><a href="http://tutorialgloriav.eklablog.com/texto-c25997896">Texto</a> <ul><li><a href="http://tutorialgloriav.eklablog.com/texto-efectos-c26001412">Efectos</a></li></ul></li><li><a href="http://tutorialgloriav.eklablog.com/tutorial-html-css-c26010984">Tutorial HTML CSS</a>

<ul><li><a href="http://tutorialgloriav.eklablog.com/boton-c26019840">Bot&oacute;n</a></li> <li><a href="http://tutorialgloriav.eklablog.com/menu-c26017216">Men&uacute;</a></li> <li><a href="http://tutorialgloriav.eklablog.com/tutorial-html-css-mostrar-ocultar-spoiler-c26019754">Mostrar/Ocultar Spoiler</a></li> </ul></li><li><a href="http://tutorialgloriav.eklablog.com/ventanas-para-texto-codigo-imagen-c26022606">Ventanas-para texto,codigo imagen</a></li></ul></div></div></li></ul>

CSS.list-menu{
padding:0;
list-style:none;
width:250px;
font-size:28px;
font-family: Edwardian Script ITC; 
border: 1px dotted rgba(0,0,0,0.8);
margin-top: -1px;
box-shadow: 0 5px 15px rgba(0,0,0,0.9);
   border-radius:10px;
}
.list-menu li a{
display: block;
border-bottom: 1px dotted #dee2ea;
 border-top: 1px solid #dee2ea;
border-radius:10px;
background:#afbbe7;
text-decoration:none;
color:rgb(0,0,0);
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000;
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:10px;
} 

.list-menu li ul li a{
font-size:25px;
color:rgb(0,0,10);
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6;
}

.list-menu li a:hover{
background:#ebf1fc;
-moz-transition: background 0.3s ease-in;
-webkit-transition: background 0.3s ease-in;
-o-transition: background 0.3s ease-in;
border: solid 1px #92748c;  
}

.list-menu ul{
margin:0;
padding:0;
list-style:none;
height:0;
overflow: hidden;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

.list-menu li ul{
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

.list-menu li:hover ul{
height: 120px;
overflow-y:auto;
overflow-x:hidden;
background:#dab7c4,0.5; 
}

.list-menu ul li a{
background:rgb(250,250,250);
}

.list-menu ul li a:hover {
    color: #dcdee9; 
-moz-transition: color 0.4s ease;
-webkit-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
}
.menu{
padding:0;
list-style:none;
width:260px;
font-size:22px;
background:#e7ecf8;  
    border: 1px dotted #92748c;   
}

.menu li a{
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid #92748c;
    background:#ebf1fc;  
text-decoration:none;
color:#FFF;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:15px;
}

.menu li ul li a{
font-size:22px;
color:#47689d;
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6; 
}

HTML<ul class="abanico"><li><a>Inicio</a></li> <li><a>Amor</a></li> <li><a>Paz</a></li> <li><a>Abundancia</a></li>   <li><a>Humor</a></li> <li><a>Felicidad</a></li> </ul>

CSSul.abanico {
 position: relative;
 width: 500px;
 height: 300px;
 margin: 40px auto;
 list-style: none;
 font: normal 16px "arial narrow", sans-serif;
 }
 ul.abanico li {
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 100px;
 height: 300px;
 background: orange;
 margin-left: -50px;
 line-height: 300px;
 text-align: center;
 -moz-transform-origin: top center;
 -webkit-transform-origin: top center;
 transform-origin: top center;
 -moz-transition: all .4s ;
 -webkit-transition: all .4s ;
 transition: all .4s ;
 }
 ul.abanico li a {
 display: inline-block;
 width: 100px;
 height: 48px;
 text-decoration: none;
 color: white;
 line-height: 40px;
 vertical-align: bottom;
 }
 ul.abanico:hover li {
 opacity: 1;
 }
 ul.abanico:hover li:nth-of-type(6) {
 opacity: 0;
 }
 ul.abanico:hover li:nth-of-type(1) {
 background: green;
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }
 ul.abanico:hover li:nth-of-type(2) {
 background: blue;
 -moz-transform: rotate(22deg);
 -webkit-transform: rotate(22deg);
 transform: rotate(22deg);
 }
 ul.abanico:hover li:nth-of-type(3) {
 background: purple;
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 ul.abanico:hover li:nth-of-type(4) {
 background: red;
 -moz-transform: rotate(-22deg);
 -webkit-transform: rotate(-22deg);
 transform: rotate(-22deg);
 }
 ul.abanico:hover li:nth-of-type(5) {
 background: orange;
 -moz-transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg); 
 transform: rotate(-45deg);
 }

HTML<ul id="menu-accordeon">   <li><a href="#">Lien menu 1</a>        <ul>           <li><a href="#">lien sous menu 1</a></li>          <li><a href="#">lien sous menu 1</a></li>           <li><a href="#">lien sous menu 1</a></li>          <li><a href="#">lien sous menu 1</a></li>        </ul>    </li>      <li><a href="#">Lien menu 2</a>       <ul>           <li><a href="#">Lien sous menu 2</a></li>          <li><a href="#">Lien sous menu 2</a></li>          <li><a href="#">Lien sous menu 2</a></li>          <li><a href="#">Lien sous menu 2</a></li>        </ul>    </li>    <li><a href="#">Lien menu 3</a>       <ul>          <li><a href="#">Lien sous menu 3</a></li>  <li><a href="#">Lien sous menu 3</a></li>           <li><a href="#">Lien sous menu 3</a></li>           <li><a href="#">Lien sous menu 3</a></li>       </ul>    </li> </ul>

CSS#menu-accordeon {
   padding:0;   
     margin:0;  
     list-style:none;  
     text-align: center;   
     width: 180px; } 
 #menu-accordeon ul {  
     padding:0;   margin:0;   
     list-style:none;        text-align: center; }  #menu-accordeon li {         background-color:#729EBF;         background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);        background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);        border-radius: 6px;         margin-bottom:2px;         box-shadow: 3px 3px 3px #999;         border:solid 1px #333A40 }  #menu-accordeon li li {    
     max-height:0;    overflow: hidden;    
     transition: all .5s;   
     border-radius:0;    
     background: #444;    
     box-shadow: none;   
     border:none;    
     margin:0 } 
 #menu-accordeon a {   
     display:block;  
     text-decoration: none;   
     color: #fff;   padding: 8px 0;   
     font-family: verdana;   
>    font-size:1.2em } 
 #menu-accordeon ul li a, 
 #menu-accordeon li:hover li a {   
     font-size:1em } 
 #menu-accordeon li:hover {   
     background: #729EBF } 
 #menu-accordeon li li:hover {    
     background: #999; }
 #menu-accordeon ul li:last-child {    
     border-radius: 0 0 6px 6px;   
     border:none; } 
 #menu-accordeon li:hover li {  
     max-height: 15em; }

HTML<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="#">Contact</a></li> </ul>

CSS
 /*Código obtenido de www.aizumblog.com */
 #menu{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;
 background: #F7E4F6;
 background: -moz-linear-gradient(#E19FDF, #F7E4F6);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#E19FDF, #F7E4F6);
 background: -o-linear-gradient(#E19FDF, #F7E4F6);
 background: -ms-linear-gradient(#E19FDF, #F7E4F6);
 background: linear-gradient(#E19FDF, #F7E4F6);
 -moz-border-radius: 3em 2.5em/1em 2.5em;
 border-radius: 3em 2.5em/1em 2.5em;
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
 }

 #menu li{
 float: left;
 padding: 0 0 10px 0;
 position:relative; 
 }

 #menu a{
 float: left;
 height: 25px;
 padding: 2 25px;
 color: #000;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
 }

 #menu li:hover > a{
 color: #fafafa;
 }

 *html #menu li a:hover{ /* IE6 */
 color: #fafafa;
 }

 #menu li:hover > ul{
 display: block;
 }

 /* Sub-menu */

 #menu ul{
 list-style: none;
 margin: 0;
 padding: 0;
 display: none;
 position: absolute;
 top: 35px;
 left: 0;
 z-index: 99999;
 background: #F7E3F6;
 background: -moz-linear-gradient(#C9BAC9, #B19EE0);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #B19EE0),color-stop(1, #C9BAC9));
 background: -webkit-linear-gradient(#C9BAC9, #B19EE0);
 background: -o-linear-gradient(#C9BAC9, #B19EE0);
 background: -ms-linear-gradient(#C9BAC9, #B19EE0);
 background: linear-gradient(#C9BAC9, #B19EE0);
 -moz-border-radius: 3em 2.5em/1em 2.5em;
 border-radius: 3em 2.5em/1em 2.5em;
 }
 
 #menu ul li{
 float: none;
 margin: 0;
 padding: 0;
 display: block;
 -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 }

 #menu ul li:last-child{
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 }

 #menu ul a{
 padding: 10px;
 height: auto;
 line-height: 1;
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
 }

 *html #menu ul a{ /* IE6 */
 height: 10px;
 width: 150px;
 }

 *:first-child+html #menu ul a{ /* IE7 */
 height: 10px;
 width: 250px;
 }

 #menu ul a:hover{
 background: #B096AF;
 background: -moz-linear-gradient(#04acec, #0186ba);
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec, #0186ba);
 background: -o-linear-gradient(#04acec, #0186ba);
 background: -ms-linear-gradient(#04acec, #0186ba);
 background: linear-gradient(#04acec, #0186ba);
 } 

 #menu ul li:first-child a{
 -moz-border-radius: 3em 2.5em/1em 2.5em;
 -webkit-border-radius: 3em 2.5em/1em 2.5em;
 border-radius: 3em 2.5em/1em 2.5em;
 }

 #menu ul li:first-child a:after{
 content: '';
 position: absolute;
 left: 30px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #4A3B49;
 }
 
 #menu ul li:first-child a:hover:after{
 border-bottom-color: #4A3B49;
 }
 
 #menu ul li:last-child a{
 -moz-border-radius: 3em 2.5em/1em 2.5em;
 -webkit-border-radius: 3em 2.5em/1em 2.5em;
 border-radius: 3em 2.5em/1em 2.5em;
 }

 /* Clear floated elements */
 #menu:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }

 * html #menu { zoom: 1; } /* IE6 */
 *:first-child+html #menu { zoom: 1; } /* IE7 */ 
 

HTML<html>   <head>     <title>Ejemplo</title>     <link rel="stylesheet" href="estilo.css" type="text/css" />   </head>   <body>     <div id="izquierda">       <ul id="menu">         <li><a href="#"><img src="img/1.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/2.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/3.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/4.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/5.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/6.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/7.jpg" alt="#" title="#" /></a></li>      </ul>    </div>     <div class="derecha">       <ul id="menu2">         <li><a href="#"><img src="img/21.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/22.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/23.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/24.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/25.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/26.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/27.jpg" alt="#" title="#" /></a></li>       </ul>     </div>     <div class="derecha">       <ul id="galeria">         <li><img src="img/31.jpg" alt="#" title="#" /></li>         <li><img src="img/32.jpg" alt="#" title="#" /></li>         <li><img src="img/33.jpg" alt="#" title="#" /></li>         <li><img src="img/34.jpg" alt="#" title="#" /></li>         <li><img src="img/35.jpg" alt="#" title="#" /></li>         <li><img src="img/36.jpg" alt="#" title="#" /></li>         <li><img src="img/37.jpg" alt="#" title="#" /></li>       </ul> </div> </body></html>

CSS/* CAPAS CONTENEDORAS */ #izquierda { 
width: 170px; 
float: left; 
} 
.derecha { 
width: 750px; 
float: left; 
} 
/* ELEMENTOS DEL MENU LATERAL */ #menu { 
padding:0; 
margin:0 auto; 
list-style-type:none; 
width:160px; 
height:312px; 
}
#menu li a { 
height:30px; 
width:160px; 
float:left; 
border-bottom:2px solid #fff; 
overflow: hidden; 
}
#menu li a img { 
border:0; 
}
#menu li a:hover { 
height:120px; 
}
 /* ELEMENTOS DEL MENU SUPERIOR */ #menu2 { 
padding:0; 
margin:0 auto; 
list-style-type:none; 
height:120px; width:354px; 
}
#menu2 li a {
 width:30px; 
height:120px; 
float:left; 
border-right:2px solid #fff; 
overflow: hidden; 
}
#menu2 li a img { 
border:0; 
}
#menu2 li a:hover {
 background:#eee; 
width:160px; 
}
 /* ELEMENTOS DE LA GALERIA DE IMAGENES */ 
#galeria { 
padding:0; 
margin:40px auto 0 auto; 
list-style-type:none; 
height:300px; 
width:774px; 
border:1px solid #888; 
}
#galeria li {
 width:60px; 
height:300px; 
float:left; 
border-left:2px solid #000; 
}
#galeria li img { 
height:300px;
width:60px; 
border:0; 
}
#galeria li:hover {
 background:#eee; 
width:400px; 
}
#galeria li:hover img {
 width:400px; 
}

HTML<ul id="ulmenu1" class="ulmodule_menu"><li id="module_menu143430540" class="module_menu module_menu_type_html" data-id="143430540"><div id="module_menu_titre143430540" class="module_menu_titre">&nbsp;</div><div id="module_menu_contenu143430540" class="module_menu_contenu"><div class="module_menu_contenu_block"><ul class="list-menu"><li><a href="http:"><img src="http://gif" alt="" width="23" height="27" />Bienvenido</a</li><li><a href="http:"><img src="http://gif" alt="" width="26" height="22" />Coraz&oacute;n</a><ul><li><a href="http:"><img src="http://.gif" alt="" width="20" height="17" />Fondo</a></li></ul></li><li><a href="http:"><img src="https://gif" alt="" width="26" height="17" />Corona</a><ul><li><a href="http:"><img src="https://gif" alt="" width="18" height="14" />Fondo</a></li></ul></li><li><a href="http:"><img src="http://.gif" alt="" width="26" height="24" />Cumplea&ntilde;os</a><ul><li><a href="http:"><img src="http://gif" alt="" width="17" height="15" />Fondo</a></li></ul></li><li><a href="http:"><img src="http://gif" alt="" width="26" height="24" />Dinero</a><ul><li><a href="http:"><img src="http://" alt="" width="17" height="17" />Fondo</a></li></ul></li><li><a href="http:"><img src="http://gif" alt="" width="26" height="24" />Personas</a><ul><li><a href="http:"><img src="http://.gif" alt="" width="18" height="18" />Fondo</a></li><li><a href="http:"><img src="http://gif" alt="" width="18" height="22" />Hombre</a></li><li><a href="http:"><img src="http://gif" alt="" width="18" height="22" />Fondo</a></li><li><a href="http:" alt="" width="18" height="22" />Mujer</a></li><li><a href="http:"><img src="http://gif" alt="" width="18" height="22" />Fondo</a></li></ul></li></ul></div></div></li></ul>

CSS.list-menu{
 padding:0;
 list-style:none;
 width:250px;
 font-size:28px;
 font-family: French Script MT; 

 border: 1px solid rgba(0,0,0,0.8);
 border-radius: 1em 0.5em;
 margin-top: -1px;
 -moz-box-shadow: inset 0 0 10px #111;
 -webkit-box-shadow: inset 0 0 10px #111;
 box-shadow: inner 0 0 10px #111;
 }
 .list-menu li a{
 display: block;
 border-bottom: 1px solid #BFA0CE;
 border-radius: 1em 0.5em;
 border-top: 1px solid #BFA0CE;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6AFCF), to(#CFADEA));
 background: -webkit-linear-gradient(top, #F6AFCF, #CFADEA);
 background: -moz-linear-gradient(top, #F6AFCF, #CFADEA);
 background: -ms-linear-gradient(top, #F6AFCF, #CFADEA);
 background: -o-linear-gradient(top, #F6AFCF, #CFADEA);
 text-decoration:none;
 color:rgb(0,0,0);
 text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000;
 filter: dropshadow(color=#000, offx=1, offy=0);
 padding:10px;
 padding-left:10px;
 } 

 .list-menu li ul li a{
 font-size:24px;
 color:rgb(0,0,10);
 text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6;
 }
 
 .list-menu li a:hover{
 background:#FCE0ED;
 -moz-transition: background 0.3s ease-in;
 -webkit-transition: background 0.3s ease-in;
 -o-transition: background 0.3s ease-in;
 border: dotted 1px #C694A1;
 } 

 .list-menu ul{
 margin:0;
 padding:0;
 list-style:none;
 height:0;
 overflow: hidden;
 transition:1s;
 -moz-transition:1s;
 -webkit-transition:1s;
 } 

 .list-menu li ul{
 transition:1s;
 -moz-transition:1s;
 -webkit-transition:1s;
 } 

 .list-menu li:hover ul{
 height: 120px;
 overflow-y:auto;
 overflow-x:hidden;
 background:#E5D6E5,0.5;
 }

 .list-menu ul li a{
 background:rgb(250,250,250);
 border-radius: 1em 0.5em;
 } 

 .list-menu ul li a:hover {
 color: #656a77;
 -moz-transition: color 0.4s ease;
 -webkit-transition: color 0.4s ease;
 -o-transition: color 0.4s ease;
 text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
 }
 .menu{
 padding:0;
 list-style:none;
 width:250px;
 font-size:22px;
 border-radius: 1em 0.5em;
 background: #EAD2FB; /* fallback colour */
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EAD2FB), to(#F6C9EC));
 background: -webkit-linear-gradient(top, #EAD2FB, #F6C9EC);
 background: -moz-linear-gradient(top, #EAD2FB, #F6C9EC);
 background: -ms-linear-gradient(top, #EAD2FB, #F6C9EC);
 background: -o-linear-gradient(top, #EAD2FB, #F6C9EC);
 border: 1px solid #92748c;
 }
 
 .menu li a{
 display: block;
 border-bottom: 1px solid rgba(0,0,0, 0.2);
 border-top: 1px solid #92748c;
 border-radius: 1em 0.5em;
 background: #DDEFEE; /* fallback colour */
 border-top:1px solid #878e98;
 border-bottom:1px solid #2799db; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDEFEE), to(#F2E1EC));
 background: -webkit-linear-gradient(top, #DDEFEE, #F2E1EC);
 background: -moz-linear-gradient(top, #DDEFEE, #F2E1EC);
 background: -ms-linear-gradient(top, #DDEFEE, #F2E1EC);
 background: -o-linear-gradient(top, #DDEFEE, #F2E1EC);
 }
 text-decoration:none;
 color:#FFF;
 text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
 filter: dropshadow(color=#000, offx=1, offy=0);
 padding:10px;
 padding-left:15px;
 } 

 .menu li ul li a{
 font-size:22px;
 color:#47689d;
 text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6;
 }

HTML<!-- inicio codigo botones laterales --><a href="#" target="_blank"><img style="display: scroll; position: fixed; top: 275px; left: 0px; z-index: 10004;" title="Fondo, gif, glitter, imagen flash" src="https://4.gif" alt="" width="50" height="40" /></a> <a title="Agregar a Favoritos/Marcadores"><img style="display: scroll; position: fixed; top: 315px; left: 0px; z-index: 10004;" title="Todo para web" src="https://3.gif" alt=" width="50" height="40" /></a><br /><a title="Bendiciones, brindis, reflexiones, libros para leer, link, oraciones, piropos, textos para los regalos, tutorial" href="#" target="_blank"><img style="display: scroll; position: fixed; top: 355px; left: 0px; z-index: 10004;" src="https://4.gif" alt="" width="50" height="40" /></a> <a title="Compra/Venta, libros para leer, link, tutorial" href="#" target="_blank"><img style="display: scroll; position: fixed; top: 395px; left: 0px; z-index: 10004;" src="https://4.gif" alt="" width="50" height="40" /></a> <a href="#" target="_blank"><img style="display: scroll; position: fixed; top: 435px; left: 0px; z-index: 10004;" title="Brindis, fondos, tutorial" src="https://4.gif" alt="" width="50" height="40" /></a> <a href="#" target="_blank"><img style="display: scroll; position: fixed; top: 475px; left: 0px; z-index: 10004;" title="Flash, fondos" src="https://4.gif" alt="" width="50" height="40" /></a> <a href="#" target="_blank"><img style="display: scroll; position: fixed; top: 515px; left: 0px; z-index: 10004;" title="Flash, fondos" src="https://2.gif" alt="" width="50" height="40" /></a> <!-- FIN codigo botones laterales -->

HTML 
JS<script src="http://ekladata.com/sVcpvNqWUPivOIRF0mRWwpQuZ_Q/highlight-pack.js"></script>

<script>// <![CDATA[

onJSFilesLoaded.push(function(){

     hljs.initHighlighting.called = false;

     hljs.initHighlighting();});

// ]]></script>

</p>

<div class="flipcard h">

<div class="front">Face avant<img style="float: right; padding: 10px; width: 40%;" src="http://dl4.glitter-graphics.net/pub/141/141854q961amfh1n.gif" alt="" /><br />ligne 01<br />ligne 02</div>

<div class="back">Et...face arri&egrave;re</div>

</div>

<p>&nbsp;</p>

<div class="flipcard v">

<div class="front">This is the front side</div>

<div class="back">This is the back side</div>

</div>

CSS.titre {
 max-width:100px;
 padding:5px;
  
 background-color:#A9D9EF;
color: #000;
 
border:2px double #78ABCC; 
  
 box-shadow:6px 6px 10px black;
 }
 .pre-lh {
 width: 90%;
 border: 0px; 
 padding: 0;
 box-shadow: 6px 6px 10px black;
 margin-bottom: 20px;
 margin-left: 20px;
 }
 /*---------------CSS-Menu-rotatif--------------*/
.flipcard {
  margin: 20px auto;
  position: relative;
  width: 220px;
  height: 160px;
 
  perspective: 500px;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front 
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 1s ease-in;
  color: #000;
  background-color: #A9D9EF;
 border-radius:65px/15px;
  padding: 10px;
  backface-visibility: hidden;
box-shadow:6px 6px 10px black;
}
.flipcard .back 
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 1s ease-in;
  color: #000;
  background-color: #fff;
 border-radius:65px/15px;
  padding: 10px;
  backface-visibility: hidden;
box-shadow:6px 6px 10px black;
}

HTML<div style="position: absolute; top: 20px; left: 30px;">
<div id="cssmenu">
<ul><!------------------------------------------------------------------------->
<li><a href="http://papyrocktest.eklablog.com/">Accueil</a></li>
<!-------------------------------------------------------------------------></ul>
<ul>
<li class="has-sub "><a href="#">Articles</a>
<ul>
<li><a href="#">Product 1 <img style="vertical-align: middle;" src="http://stat17.privet.ru/lr/091b56586897a96151f0e8cdecd25268" alt="" width="100" /></a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
</ul>
<ul><!------------------------------------------------------------------------->
<li class="has-sub "><a href="#">Liens</a>
<ul>
<li><a href="http://www.eklablog.com/" target="_blank">Eklablog</a></li>
<li><a href="http://doc.eklablog.com/forums" target="_blank">Forum Eklablog</a></li>
<li><a href="http://papyrock.eklablog.com//" target="_blank">Papyrock</a></li>
<li><a href="http://www.picmonkey.com/" target="_blank">Picmonkey</a></li>
<li><a href="http://www.w3schools.com/" target="_blank">W3Schools</a></li>
</ul>
</li>
<!------------------------------------------------------------------------->
<li class="has-sub "><a href="http://papyrocktest.eklablog.com/contact">Contact</a>
<ul>
<li><a href="http://papyrocktest.eklablog.com/newsletter">Newsletter</a></li>
</ul>
</li>
<!------------------------------------------------------------------------->
<li class="has-sub "><a href="http://papyrocktest.eklablog.com/forum-forum36483">Forum</a>
<ul>
<li><a href="#">Forum 1</a></li>
<li><a href="#">Forum 2</a></li>
<li><a href="#">Forum</a></li>
</ul>
</li>
</ul>
</div>
</div>

CSS /*--------- Menu CSS --------------*/
#cssmenu{ 
    width:500px;height:37px; 
    display:block; padding:0; 
    margin:20px auto;  
    border:1px solid; 
    border-radius:5px; } 
#cssmenu > ul {
    list-style:inside none; 
    padding:0; margin:0;} 
#cssmenu > ul > li {
    list-style:inside none; 
    padding:0; margin:0; 
    float:left; 
    display:block; 
    position:relative;} 
#cssmenu > ul > li > a{ 
    outline:none; 
    display:block; 
    position:relative; 
    padding:12px 20px; 
    font:bold 13px/100% Arial, Helvetica, sans-serif; 
    text-align:center; 
    text-decoration:none; 
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 

#cssmenu > ul > li:first-child > a{
    border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ 
    content:''; position:absolute; 
    border-right:1px solid; top:-1px; 
    bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{
    top:0; 
    bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ 
    content:''; position:absolute; 
    top:18px; 
    right:6px; 
    border:5px solid transparent; 
    border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#78CBE9; border-color:#78CBE9; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#78CBE9; border-color:#78CBE9;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#78CBE9; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 



#cssmenu, #cssmenu > ul > li > ul > li a:hover{ 
    background:#DCF2F9; 
    background:-moz-linear-gradient(top,  #89A8B3 0%, #DCF2F9 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#89A8B3), color-stop(100%,#DCF2F9)); 
    background:-webkit-linear-gradient(top,  #89A8B3 0%,#DCF2F9 100%); 
    background:-o-linear-gradient(top,  #89A8B3 0%,#DCF2F9 100%);
    background:-ms-linear-gradient(top,  #89A8B3 0%,#DCF2F9 100%); 
    background:linear-gradient(top,  #89A8B3 0%,#DCF2F9 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#89A8B3', endColorstr='#DCF2F9',GradientType=0 ); } 
#cssmenu{border-color:#538DA2;} 
#cssmenu > ul > li > a{border-right:1px solid #538DA2; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#fff;} 
#cssmenu > ul > li > a:hover{background:#B6C8CE;}

HTML<div style="background-image: url('https://lh3.googleusercontent.com/pruMGrSG4d1YbcGPlFB5DC8a5p4Wh1_Um7oo2pZzmIio=w46-h137-no'); border-radius: 40px 10px; border: 4px double #ceb3dc; padding-left: 5px; padding-right: 5px; width: 200px; height: 100%;"><a href="http://eklablog.com/">Bienvenido</a></div>
<div style="background-image: url('https://lh3.googleusercontent.com/pruMGrSG4d1YbcGPlFB5DC8a5p4Wh1_Um7oo2pZzmIio=w46-h137-no'); border-radius: 40px 10px; border: 4px double #ceb3dc; padding-left: 5px; padding-right: 5px; width: 200px; height: 100%;"><a href="http://eklablog.com/">HTML</a></div>
<div style="background-image: url('https://lh3.googleusercontent.com/pruMGrSG4d1YbcGPlFB5DC8a5p4Wh1_Um7oo2pZzmIio=w46-h137-no'); border-radius: 40px 10px; border: 4px double #ceb3dc; padding-left: 5px; padding-right: 5px; width: 200px; height: 100%;"><a href="http://eklablog.com/">Flash</a></div>

HTML<ul id="nav">
	<li>
		<a href="#" title="Regreso al página principal">Principalt;/a>
	</li>
	<li>
		<a href="#" title="Sobre nosotros">About</a>
		<ul>
			<li><a href="#">Productos</a></li>
			<li><a href="#">Grupo</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Servicios">Servicios</a>
		<ul>
			<li><a href="#">Servicios 1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="1º linea">Productos</a>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#">10</a></li>
			<li><a href="#">11</a></li>
		</ul>
	</li>
	<li>
		<a href="#" title="Contacto">Correo</a>
		<ul>
			<li><a href="#">Horario</a></li>
			<li><a href="#">Ubicación</a></li>
		</ul>
	</li>
</ul>

CSS/*------------------------------------*\
	Navegacion
\*------------------------------------*/
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;
	
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Sombra para texto */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Se ve translúcido */
	text-decoration:underline;
}

/*--- Puntos desplegables ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Escondido detrás de la pantalla, cuando no es necesario (este método es mejor que display:none;) */
	opacity:0; /* Establecer el estado inicial de la transparencia */
	-webkit-transition:0.25s linear opacity; /* En Webkit artículos cayendo se le aparecen */
}
#nav ul li{
	padding-top:1px; /* Introduzca el espaciado entre li para crear la ilusión de los elementos de menú separado */
	float:none;
	background:url(dot.gif);
}
#nav ul a{
	white-space:nowrap; /* Detener la transmisión de texto y crear un elemento desplegable de varias líneas */
	display:block;
}
#nav li:hover ul{ /* Imprimir el elemento desplegable con el cursor */
	left:0; /* Nos trae de vuelta a la pantalla cuando se necesita */
	opacity:1; /* Hacer opaca */
}
#nav li:hover a{ /* Define el estilo para el nivel superior, donde la lista desplegable de salida */
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Se ve translúcido */
	text-decoration:underline;
}
#nav li:hover ul a{ /* Cambiar algunos de los estilos del nivel superior de la derivación del elemento desplegable */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Hemos creado el estilo de los elementos desplegables cuando el cursor se induce en un artículo en particular */
	background:#333;
	background:rgba(51,51,51,0.75); /* Será un semi-transparente */
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}

HTML<ul class="menu">
    <li><a href=#>Menú 1</a>
        <ul class="submenu">
            <li><a href=#>Submenú 1</a></li>
            <li><a href=#>Submenú 1</a></li>
            <li><a href=#>Submenú 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 2</a>
        <ul class="submenu">
            <li><a href=#>Submenú 2</a></li>
            <li><a href=#>Submenú 2</a></li>
            <li><a href=#>Submenú 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 3</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 3</a></li>
            <li><a href=#>Sudmenú 3</a></li>
            <li><a href=#>Sudmenú 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 4</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 4</a></li>
            <li><a href=#>Sudmenú 4</a></li>
            <li><a href=#>Sudmenú 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menú 5</a>
        <ul class="submenu">
            <li><a href=#>Sudmenú 5</a></li>
            <li><a href=#>Sudmenú 5</a></li>
            <li><a href=#>Sudmenú 5</a></li>
        </ul>
    </li>
</ul>

CSS body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
ul.menu > li:hover > ul.submenu {
    display: block;
}

HTML<!-------------Menu flotante-------------------->
<p>&nbsp;</p>
<div id="table">
<div class="titre">Otros blogs</div>
<table>
<tbody>
<tr>
<td>
<p class="text-center"><a href="http://fondogifflashgloriav.ek.la/"target="_blank">Fondos, gif, flash </a></p>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<p class="text-center"><a href="http://fondogifflashgloriav.ek.la/"target="_blank">Gif, fondos, glitter</a></p>
</td>
</tr>
</tbody>
</table>
</div>

CSS <style><!--
#table  table {  
 font-size:25px; 
 padding:1px;
   width:180px;
   height:80px;
   border:dotted 2px #fff;
  border-radius: 10px;
   margin: 0px; 
   box-shadow: 0px 0px 10px black,0px 0px 10px black inset;
   background-color:#fff;
   background: url(http://ekladata.com/iZLmW_VVm4oaSHHrbiwuvjKJtSc.gif);
 
  }
 .titre{  
    font-size:28px;                       
    color:black;                      
    text-align:center;                   
    position:relative;                  
    left:125px;                      
    top:100px;                           
    width:123px;                          
    height:29px;
    box-shadow: 0px 0px 10px black; 
    background: url(https://lh3.googleusercontent.com/2NGM5rVOcNbJt2prgQqbJ81vGoI3Vcifw-MSXWncg65H=w148-h149-no);
  border-radius:0px 0px 10px 10px;   /* arrondi des coins inférieurs de la boite de 8 px */ 
    border:double 3px #999FAA;
  padding:5px 18px;
    transform: rotate(270deg);         /* angle de rotation de la boite de 270° */  
    -ms-transform: rotate(270deg);   
    -webkit-transform: rotate(270deg);   
    -o-transform: rotate(270deg);   
    -moz-transform: rotate(270deg);   
}
 #table {  
    
    position:fixed;  
    top:40px;  
    left:-185px;  
    transition: 1s;  
    -webkit-transition: 1s;  
    -moz-transition: 1s;  
}
 #table:hover {  
      
    left:-1px;  
    transition: 1s;  
    -webkit-transition: 1s;  
    -moz-transition: 1s;  
      
}
--></style>

HTML <ul id="menu1_float"><li><a>Créations Perso</a><ul><li><a href="/defi-babouchka-c26106726">Défi Babouchka</a></li><li><a href="/defi-kikoonette-c26106758">Défi Kikoonette</a></li><li><a href="/defi-violine-c26106830">Défi  Violine</a></li><li><a href="/crea-perso-c26884908">Créa perso</a></li></ul>

CSS#menu1_float{ 
  display: block;}
#menu1_float{
  width: 205px;
  height:320px;
  position:fixed;/*--ou absolute si menu long-fixed -*/
  top:50px;
 right:-205px;
 height:100px;
 font-family: "Edwardian Script ITC";font-size: 23px;
  text-shadow: 1px 1px 1px #000000;
 border:1px dotted grey;
  border-radius: 10px;
 box-shadow:6px 6px 10px black;
 margin-top: 25px;
 text-align:left;
 background-image: url('http://5.firepic.org/5/images/2015-08/12/flqr62c6rtex.gif');
  transition:1s;}
 
#menu1_float:hover{
 right:0px;
 height:220px;/*--ajuster la valeur (+ ou -)----*/
 overflow:auto;
  transition:0.6s;
}
 
#menu1_float:before {
 content:"";
 float:left;  
 padding:0px 5px;
 font-weight: bold;
 }
 
#menu1_float:hover:before {content:"";}
#menu1_float.module_menu_titre {margin-left: 30px;  
background-color:rgba(223, 226, 227, 0.68);}
#menu1_float .module_menu_type_calendar .module_menu_contenu {
margin-left: 30px;}
p{
    font-family: "Edwardian Script ITC";
}
p, .module_titre_contenu{
    font-family: "Edwardian Script ITC";
}
#body a.button_tools {
     background-color: #2c2e3c;
     color:white;
     font-weight:bold;
}

HTML <ul class="menu">
<li><a href="http://giffondosflashgloriav.eklablog.com/bienvenido-c26050834"><img src="https://lh6.googleusercontent.com/-AZaKHmh0Qtc/U2-3fuk-ZCI/AAAAAAAAYiE/mcJionKRt8Q/w22-h32-no/3.gif" alt="" width="24" height="27" />Bienvenido</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/bordes-c26728266">Bordes</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/bordes-horizontales-c28542710"> Horizontales</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/bordes-verticales-c28542712">Verticales</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-c26119336"><img src="https://lh3.googleusercontent.com/-ngVUeln58pY/V3ZaC795UNI/AAAAAAACHNs/wmf_0rqAUr4uH1G-1NNRhVRZ34FlYMx_QCLcB/s426/9.gif" alt="" width="20" height="20" />Encaje</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-azul-c26119342"><img src="https://lh3.googleusercontent.com/-DCV_wLOlPgU/V3ZZnIy8kUI/AAAAAAACHLs/IFLQ-dDXrNsHp4HCqrR3lciJ9odcwypxgCL0B/s426/5.png" alt="" width="11" height="11" />Azul</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-beis-c28527918"><img src="https://lh3.googleusercontent.com/-y6F3UmCRvAo/V3ZZ_m8iDDI/AAAAAAACHNI/crJs1-ZxIvc2Wl0vGpKQ8Aw6fc220TSYQCLcB/s426/8.png" alt="" width="11" height="11" />Beis</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/encaje-rainbow-c26119350"><img src="https://lh3.googleusercontent.com/-ngVUeln58pY/V3ZaC795UNI/AAAAAAACHNs/wmf_0rqAUr4uH1G-1NNRhVRZ34FlYMx_QCLcB/s426/9.gif" alt="" width="11" height="11" />Multi</a></li>
</ul>
</li>
</ul>

CSS/*Menu*/ 
.menu {
position: absolute;
top: 14px;
left: 10px;
height: 60px;
}
.menu li {
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9587be), to(#dedddb));
   background: -webkit-linear-gradient(top, #9379D6, #FDF2B4);
   background: -moz-linear-gradient(top, #9587be, #dedddb);
   background: -ms-linear-gradient(top, #9379D6, #FDF2B4);
   background: -o-linear-gradient(top, #9587be, #FDF2B4);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')";
   background: linear-gradient(#9379D6, #FDF2B4);

    border-bottom: 1px dotted #3D1C89;
    border-top: 2px solid #9B7ED8; 
    border-radius: 15px/25px;
    min-width: 15px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
   border-radius: 15px/25px;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #000;
    display: block;
    font-size:32px; 
    font-family: Parchment;
    line-height: 29px;
    padding: 0 25px;
    text-decoration: none;
   
}
.menu li:hover {
    background-color: #9379D6;
    background: -moz-linear-gradient(#fff, #A996C9);
    background: -ms-linear-gradient(#fff, #A996C9);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A488EC), color-stop(100%, #5d5390));
    background: -webkit-linear-gradient(#fff, #A996C9);
    background: -o-linear-gradient(#fff, #A996C9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A488EC', endColorstr='#5d5390');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A488EC', endColorstr='#5d5390')";
    background: linear-gradient(#fff, #A996C9);

    border-bottom: 2px solid #3D1C89;
    border-top: 2px solid #fff;
}
.menu li:hover > a {
    border-radius: 5px 0 0 5px;
    border-left: 3px solid #634DBC;
    color: #A99CDE;
}
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}​

HTML <ul class="nav">
    <li>
        <a href="#">Home<span class="flecha"></span></a>
    </li>
    <li>
        <a href="#">Servicios<span class="flecha"></span></a>
        <ul>
            <li><a href="#">Diseno grafico<span class="flecha"></span></a></li>
            <li>
                <a href="#">Diseno web<span class="flecha"></span></a>
                <ul>
                    <li><a href="#">Submenu 1<span class="flecha"></span></a></li>
                    <li><a href="#">Submenu 2<span class="flecha"></span></a></li>
                    <li><a href="#">Submenu 3<span class="flecha"></span></a></li>
                    <li><a href="#">Submenu 4<span class="flecha"></span></a></li>
                    <li><a href="#">Submenu 5<span class="flecha"></span></a></li>
                </ul>
            </li>
            <li>
                <a href="#">Marketing<span class="flecha"></span></a>
                <ul>
                    <li><a href="#">Submenu 1<span class="flecha"></span></a></li>
                    <li><a href="#">Submenu 2<span class="flecha"></span></a></li>
                    <li>
                        <a href="#">Submenu 3<span class="flecha"></span></a>
                        <ul>
                            <li><a href="#">Submenu 1<span class="flecha"></span></a></li>
                            <li><a href="#">Submenu 2<span class="flecha"></span></a></li>
                            <li><a href="#">Submenu 3<span class="flecha"></span></a></li>
                            <li><a href="#">Submenu 4<span class="flecha"></span></a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">SEO<span class="flecha"></span></a></li>
        </ul>
    </li>
    <li>
        <a href="#">Acerca<span class="flecha"></span></a>
        <ul>
            <li><a href="#">Historia<span class="flecha"></span></a></li>
            <li><a href="#">Mision<span class="flecha"></span></a></li>
            <li><a href="#">Vision<span class="flecha"></span></a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contacto<span class="flecha"></span></a>
    </li>
</ul> 

CSS* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 21%,#99b3c9 55%,#7db9e8 100%);
color:#000;
display:block;
border: 2px dotted #fff; 
border-radius: 5px;
padding:12px 12px;
 
}
.nav li a:hover {
background: linear-gradient(to bottom, #eaf4fc 0%,#ebe8f9 21%,#f9e8f0 55%,#e9f4fd 100%); 
  border-radius: 5px;
}
.nav li ul {
display:none;
position:absolute;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-105px;
top:0;
}
.nav li .flecha{
font-size: 9px;
padding-left: 5px;
display: none;

}
.nav li a:not(:last-child) .flecha {
display: inline;
}