-
2. Menú acordeón vertical
<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"> </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ón</a></li> <li><a href="http://tutorialgloriav.eklablog.com/menu-c26017216">Menú</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>.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; }