Menu - (page 2) - Tutorial, CSS, HTML

Par GloriaV le 16 Juillet 2016 à 19:21

15. Menú horizontal con imagen 2 niveles

<div id="menubloque">
<ul id="menudesplegable">
<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/asiaticos-c26082286"><img src="http://www.canalgif.net/Gifs-animados/Etnias/Asia/Imagen-animada-Asia-60.gif" alt="" width="24" height="27" />Asiaticos</a>
<ul>
<li><a href="http://giffondosflashgloriav.eklablog.com/asiaticos-fondo-c26082288">Fondos</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/besos-c26861444"><img src="http://www.apuntesytrabajos.es/ApuntesyTrabajos/images/gifANIMADOSsanVALENTIN/32.gif" alt="" width="28" height="27" /> Besos</a>
<ul>
<li><a href="http://giffondosflashgloriav.eklablog.com/besos-fondo-c26866406">Fondos</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-c26053908"><img src="https://lh3.googleusercontent.com/-WIeSgwC6bfI/V0lKMEINllI/AAAAAAAB4fo/kN73vqzy-yMMCPJjydyx1g_WgtOCEfZPgCLcB/w426-h459/1.gif" alt="" width="27" height="27" />Coraz&oacute;n</a>
<ul>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-flash-c26099626"> Flash</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-fondo-c26056844"> Fondo</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-gif-c26119178"> Gif</a></li>
</ul>
</li>
</ul>
</div>

CSS

/*Menu*/ 
#menubloque {
position: absolute;
top: 30px;
left: 100px;
height: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));
background: -webkit-linear-gradient(top, #, #);
background: -moz-linear-gradient(top, #, #);
background: -ms-linear-gradient(top, #, #);
background: -o-linear-gradient(top, #, #);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')";
background: linear-gradient(#, #);
border: px double #; 
border-radius:;
padding:;
width: ;
height: 43px;
font-size: ;
color: #000;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
color:#fff;
background:#F7EEF1;
border: 1px dotted #BC677E; 
border-radius: 5px;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
background: #;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #000;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: none;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #fff;
background-color:#ECA2B8;    
border: 1px dotted #D666A7;
border-radius: 5px;   
background-image:-webkit-linear-gradient(top, #DB91A7 0%, #fff 90%);   
background-image: linear-gradient(to bottom, #DB91A7 0%, #fff 90%);   
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;

}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: none;
background:#D7E7F0;
border-radius: 5px;
color:#4083A9;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 2px solid #95BFD7;
border-top: 2px solid #95BFD7;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background:#F3D3E6;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}

Par GloriaV le 16 Juillet 2016 à 19:22

17. Menú horizontal 2 niveles con imagen

<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/asiaticos-c26082286"><img src="http://www.canalgif.net/Gifs-animados/Etnias/Asia/Imagen-animada-Asia-60.gif" alt="" width="24" height="27" />Asiaticos</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/asiaticos-fondo-c26082288"> Fondo</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/besos-c26861444"><img src="http://www.apuntesytrabajos.es/ApuntesyTrabajos/images/gifANIMADOSsanVALENTIN/32.gif" alt="" width="28" height="27" /> Besos</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/besos-fondo-c26866406"> Fondo</a></li>
</ul>
</li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-c26053908"><img src="https://lh3.googleusercontent.com/-WIeSgwC6bfI/V0lKMEINllI/AAAAAAAB4fo/kN73vqzy-yMMCPJjydyx1g_WgtOCEfZPgCLcB/w426-h459/1.gif" alt="" width="27" height="27" />Coraz&oacute;n</a>
<ul class="submenu">
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-flash-c26099626"> Flash</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-fondo-c26056844"> Fondo</a></li>
<li><a href="http://giffondosflashgloriav.eklablog.com/corazon-gif-c26119178"> Gif</a></li>
</ul>
</li>
</ul>

CSS

/*Menu*/ 
.menu {
position: absolute;
top: 30px;
left: 100px;
height: 40px;
  }
.menu li a {font-weight:600;
text-decoration:none;
padding:7px;
display:block;
color:#000;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C6D6DE), to(#fff));
background: -webkit-linear-gradient(top, #D8A1AF, #C6D6DE);
background: -moz-linear-gradient(top, #9587be, #dedddb);
background: -ms-linear-gradient(top, #D8A1AF, #C6D6DE);
background: -o-linear-gradient(top, #9587be, #C6D6DE);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9587be', endColorstr='#dedddb')";
background: linear-gradient(#D8A1AF, #C6D6DE);
border: 4px double #FAE5EC; 
border-radius: 5px;
}
.menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#E997B0;
border: 2px solid #FAE5EC; 
border-radius: 5px;}
/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
/* display second level menu on hover */
.menu li:hover > ul{ display: block;}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu ul li a {
font-size:18px;
font-weight:normal;
display:block;
background-color:#CFA5AB;    
border: 1px dotted #D666A7;
border-radius: 5px;   
background-image:-webkit-linear-gradient(top, #F3C5D0 0%, #fff 90%);   
background-image: linear-gradient(to bottom, #F3C5D0 0%, #fff 90%);  
 }
.menu ul li a:hover, .menu ul li:hover > a{
background:#D7E7F0;
border:2px solid #95BFD7;
border-radius: 5px;
color:#4083A9;
}
/* change level 3 menu positions */
.menu ul ul {left: 149px;
 top: 0px;
 margin: 3px 0px 0px 2px;
}
.mobile-menu{display:none;
width:100%;
padding:11px;
background:#D666A7;
position: static;
left: auto;
color:#;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#D666A7;
color:#;
left: auto;
text-decoration:none;
}

Par GloriaV le 16 Juillet 2016 à 19:24

18. Menú horizontal 2 niveles

<ul id="navbar"> <!--Lista que define los elementos principales que se muestran siempre-->
<li><a href="http://aprenderaprogramar.com">Libros</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li> <!--SubItem de menú-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li><!--Item principal de menú-->
<li><a href="http://aprenderaprogramar.com">Humor</a> <!--Item principal de menú-->
<ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Humor informático</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor programación</a></li> <!--SubItem de menú-->
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> <!--SubItem de menú-->
</ul>         
</li>
</ul>

CSS

/* Curso CSS estilos aprenderaprogramar.com*/
body {font: 92.5%/1.9 Arial, Helvetica, sans-serif;background-color: #eee; }
h2 {margin:0;}

/*Caja contenedora*/   
#wrap { font-size: 1.8em; width: 520px; padding: 30px;
        margin: 0 auto; /*Da lugar al centrado de la caja en el elemento superior body*/
        background-color: #fff;}

/* Estilos que crean el menú desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }

/*Elementos items principales de menú que se muestran siempre*/
#navbar li { list-style: none; float: left; margin:10px;}
   
#navbar li a {
   display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
   padding: 3px 8px; background-color: #5e8ce9; color: #fff;
    border-radius: 10px; border: 4px double #fff;
   text-decoration: none; }

/*Listas de subitems de menú*/   
#navbar li ul {
   display: none; /*La lista inicialmente no se muestra debido a display:none; */
   background-color: #69f;
    border-radius: 5px; border: 1px dotted #fff;}
   
#navbar li:hover ul {
   font-size: 18px;
   display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
   position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
   margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
   }
#navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
/*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }

/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
#navbar li li a:hover { background-color: #8db3ff; }
   
.limpiador{padding:0; border-style:none; clear:both; } /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/

Par GloriaV le 16 Juillet 2016 à 19:26

19. Menú horizontal 2 niveles

<div id="subnavbar">
<ul id="subnav">
<li><a href="#"
title="Inicio">Inicio</a>
</li>
<li><a href="#"
title="Texto">Menu 1 </a>
<ul>
<li><a href="#"
title="Texto">Submenu 1-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 1-2</a>
</li>
<li><a href="#"
title="Texto">Submenu 1-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 2</a>
<ul>
<li><a href="#"
title="Texto">Submenu2-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 2-2</a>
</li>
<li><a href="#"
title="Texto">Submenu 2-3</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 3</a>
<ul>
<li><a href="#"
title="Texto">Submenu 3-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 3-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 4</a>
<ul>
<li><a href="#"
title="Texto">Submenu 4-1</a>
</li>
<li><a href="#"
title="Texto">Submenu 4-2</a>
</li>
</ul>
</li>
<li><a href="#"
title="Texto">Menu 5</a>
<ul>
<li =><a href="#"
title="Texto">Submenu 5-1</a>
</li>
<li><a href="#"

title="Texto">Submenu 5-2</a>
</li>
<li><a href="#"

title="Texto">Submenu 5-3</a>
</li>
<li><a href="#"
title="Texto">Submenu 5-4</a>
</li>
</ul>
<li><a href="#" title="Texto">Contacto</a>
</li>
</li></ul></div>

CSS

#subnavbar {
width: 540px;
height: 33px;
font-weight:bold;
color: #000;
margin: 5px;
padding: 5px;
font-family:"Trebuchet MS";
background: #F1D7FF;
border-radius: 5px;
border: 4px double #3C005A;
}
#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #000;
display: block;
font-size: 16px;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
border: 1px dotted #3C005A;
}

#subnav li a:hover, #subnav li a:active {
background: #DDD7E0;
color: #fff;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background-color: rgba(186, 169, 207, 0.6);
background: rgba(186, 169, 207, 0.6);
color: rgba(186, 169, 207, 0.6);
color: #000;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background-color: rgba(221, 195, 233, 0.9);
background: rgba(221, 195, 233, 0.9);
color: rgba(221, 195, 233, 0.9);
color: #fff;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;

}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover
ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li
li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}

Par GloriaV le 16 Juillet 2016 à 19:31

20. Menú vertical 3 niveles (no me funciona bien)

Fuente. http://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/

<nav class="nav" role="navigation">
  <ul class="nav__list">
    <li>
      <input id="group-1" type="checkbox" hidden />
      <label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li><a href="#">1st level item</a></li>
        <li>
          <input id="sub-group-1" type="checkbox" hidden />
          <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-1" type="checkbox" hidden />
              <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-2" type="checkbox" hidden />
      <label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-2" type="checkbox" hidden />
          <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-2" type="checkbox" hidden />
              <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-3" type="checkbox" hidden />
      <label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-3" type="checkbox" hidden />
          <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-3" type="checkbox" hidden />
              <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-4" type="checkbox" hidden />
      <label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-4" type="checkbox" hidden />
          <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

 .nav a, .nav label {
  display: block;
  padding: .85rem;
  color: #000;
  background-color: #fff;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 255, 0.5);
  background: #030303;
}

.nav label { cursor: pointer; }
/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #252525;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }
label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

Par GloriaV le 16 Juillet 2016 à 19:36

21. Menú vertical

En Eklablog no funciona

<nav>
  <div id="logo">Your Logo here</div>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li> 
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Service +</label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li> 
      
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Portfolio +</label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li> 
          
          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Works +</label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

CSS

nav {
  margin: 0;
  padding: 0;
  background-color: #FEBFDC;
  border-radius: 5px;
border: 1px dotted #ccc; 
box-shadow: inset 0 -1px #373737;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #FE80B9;
  border-radius: 5px;
border: 1px dotted #ccc; 
box-shadow: inset 0 -1px #373737;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #C4C2FF; }

nav a:hover { background-color: #C4C2FF; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' +'; }

@media all and (max-width : 768px) {

#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #F2C2FF;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #C4C2FF; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #F2C2FF; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #C2EEFF; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}

Par GloriaV le 16 Juillet 2016 à 19:37

22. Menú horizontal 3 niveles

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

CSS

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
 
.nav > li {
float:left;
}
 
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border-radius: 10px; border: 4px double #fff;
padding:10px 12px;
}
 
.nav li a:hover {
background:#0fbfc6;
}
 
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
 
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
 
.nav li ul li ul {
right:-140px;
top:0;
}

Par GloriaV le 16 Juillet 2016 à 19:39

23. Menú horizontal 2 niveles

Fuente: http://codepen.io/waddington/pen/fBicd
a. http://codepen.io/waddington/pen/mloCb
Se instala donde esta el código
Para cambiar posición :
.wrapper {

margin:0 auto;
width:804px;
position: absolute;
top: 35px;
left: 50px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:300px;
-ms-perspective:300px;
perspective:300px;
}

<ul class="wrapper">
<li class="list"><a class="non" href="#">Item</a></li>
<li class="list"><a class="non" href="#">Item</a></li>
<li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="list"><a class="non" href="#">Item</a></li>

</ul>

CSS

body {
  padding:0;
  background-image:url(http://www.cool-backgrounds.org/wallpapers/simple_clouds_background-1920x1080.jpg);
  background-position:center left;
  background-attachment:fixed;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  color:#1d1d1d;
}
ul, li {
  padding:0;
  margin:0;
  list-style-type:none;
}
.wrapper {
  margin:0 auto;
  width:804px;
  padding: 110px 11px 10px 12px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d; 
  -webkit-perspective:300px;
  -ms-perspective:300px;
  perspective:300px;
}
.front, .non {
  height:30px;
  width:100px;
  line-height:30px;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  background-image:-webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%);
  background-image:linear-gradient(to bottom, #ff7000 70%, #ff560f 100%);
  display:block;
 
}
.bottom {
  background-image:-webkit-linear-gradient(top,#ff7000,#ff560f 40px);
  background-image:linear-gradient(to bottom, #ff7000,#ff560f 40px);
}
.bottom li:hover {
  background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012);
  background-image:linear-gradient(to bottom, #ff8931 , #ff5012);
}
.bottom li:first-of-type {
border-radius: 5px;
  border: 1px solid #fff;
}
.non:hover, .front:hover {
  background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012);
  background-image:linear-gradient(to bottom, #ff8931 , #ff5012);
 
}
.wSub, .list {
  height:30px;
  -webkit-transform-origin: center center -20px;
  -moz-transform-origin: center center -20px;
  -ms-transform-origin: center center -20px;
  -o-transform-origin: center center -20px;
  transform-origin: center center -20px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition:all 500ms ease-in-out 300ms;
  -moz-transition:all 500ms ease-in-out 300ms;
  -ms-transition:all 500ms ease-in-out 300ms;
  -o-transition:all 500ms ease-in-out 300ms;
  transition:all 500ms ease-in-out 300ms;
  display:block;
  cursor:pointer;
  float:left;
}
.bottom {
  height:120px;
  border-radius:0 0 5px 5px;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform:rotateX(-90deg);
  -moz-transform:rotateX(-90deg);
  -ms-transform:rotateX(-90deg);
  -o-transform:rotateX(-90deg);
  transform:rotateX(-90deg);
  border-top:none;
  text-align:center;
  line-height:40px;
}
a {
  text-decoration:none;
  color:inherit;
}
.bottom li:last-of-type, .bottom li:last-of-type a {
  border-radius:0 0 5px 5px;  
}
.wSub:hover {
  -webkit-transform:rotateX(90deg);
  -moz-transform:rotateX(90deg);
  -ms-transform:rotateX(90deg);
  -o-transform:rotateX(90deg);
 transform:rotateX(90deg);
  -webkit-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;
}
.list:first-of-type .non {
  border-radius:5px 0 0 5px;
  
}
.list:last-of-type .non {
  border-radius:0 5px 5px 0;
   
}
.list, .front {
   border-radius:5px;
  border-right:1px solid #ccc;
   border-left:1px solid #ccc;
  
}
.list:last-of-type {
  border:none;
}
}

Par GloriaV le 16 Juillet 2016 à 19:43

24. Menú horizontal 3 niveles!!!

http://campamentoweb.blogspot.com.es/2014/01/menu-horizontal-desplegable-solo-con-css.html#.V4ZPKdSLSig

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Cambiar CSS

#cssmenu > ul {
position: relative;
z-index: 597;
float: left;
position: absolute;
top: 235px;
left: 100px;
background-image: linear-gradient(135deg, rgba(154,142,193,1) 0%, rgba(154,142,193,0.96) 10%, rgba(174,164,205,0.92) 20%, rgba(242,242,242,0.87) 35%, rgba(242,242,242,0.75) 65%, rgba(174,164,205,0.7) 80%, rgba(154,142,193,0.66) 90%, rgba(154,142,193,0.62) 100%);

CSS

/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu > ul {
  position: relative;
  z-index: 597;
  float: left;
}
#cssmenu > ul li {
  float: left;
  min-height: 1px;
  line-height: 1.3em;
  vertical-align: middle;
  padding: 10px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
  z-index: 599;
  cursor: default;
}
#cssmenu > ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
}
#cssmenu > ul ul li {
  float: none;
}
#cssmenu > ul li:hover > ul {
  visibility: visible;
}
/* Align last drop down RTL */
/* Theme Styles */
#cssmenu > ul a:link {
  text-decoration: none;
}
#cssmenu > ul a:active {
  color: #ffa500;
}
#cssmenu li {
  padding: 0;
  color: #000;
}
#cssmenu {
  font-family: 'Lato', sans-serif;
  width: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: #1b9bff;
  font-size: 13px;
  -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
}
#cssmenu > ul {
  padding: 0 5px;
  -moz-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  display: block;
  float: none;
  zoom: 1;
}
#cssmenu > ul:before {
  content: '';
  display: block;
}
#cssmenu > ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu > ul > li {
  padding: 8px 5px;
}
#cssmenu > ul > li > a,
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:visited {
  text-shadow: 0 -1px 1px #004881;
  color: #fff;
  padding: 7px 20px;
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a {
  background-color: #0082e7;
}
#cssmenu li li a {
  color: #8b8b8b;
  font-size: 13px;
}
#cssmenu li li a:hover {
  color: #5c5c5c;
  border-color: #5c5c5c;
}
#cssmenu ul ul {
  margin: 0 10px;
  padding: 0 10px;
  float: none;
  background: #efefef;
  border: 2px solid #1b9bff;
  border-top: none;
  right: 0;
  left: 0;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
#cssmenu ul > li > ul > li {
  margin: 0 10px 0 0;
  position: relative;
  padding: 0;
  float: left;
}
#cssmenu ul > li > ul > li > a {
  padding: 10px 20px 10px 10px;
  display: block;
}
#cssmenu ul > li > ul > li.has-sub > a:before {
  content: '';
  position: absolute;
  top: 18px;
  right: 6px;
  border: 5px solid transparent;
  border-top: 5px solid #8b8b8b;
}
#cssmenu ul > li > ul > li.has-sub > a:hover:before {
  border-top: 5px solid #5c5c5c;
}
#cssmenu ul ul ul {
  width: 200px;
  top: 100%;
  border: 2px solid #1b9bff;
}
#cssmenu ul ul ul li {
  float: none;
}

Par GloriaV le 16 Juillet 2016 à 19:51

25. Menú

Par GloriaV le 16 Juillet 2016 à 19:59

26. Menú horizontal 1 nivel

<div id='menu'>
<ul>
  <li><a href='#'>Pestaña 1</a></li>
  <li><a href='#'>Pestaña 2</a></li>
  <li><a href='#'>Pestaña 3</a></li>
  <li><a href='#'>Pestaña 4</a></li>
  <li><a href='#'>Pestaña 5</a></li>
  <li><a href='#'>Pestaña 6</a></li>
  </ul>
</div>

CSS

/* Menú envolvente---- */
#menu:after, #menu:before {
content: '';
position: absolute;
}

#menu {
height:20px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0; 
background: #3A819D; /* Color del menú */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 #bbb;
-webkit-box-shadow: 0 2px #bbb;
}

#menu:before, #menu:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menu:before {
border-width: 0 20px 10px 0;
border-right-color: #234B5B; /* Color de la sombra del doblez */
left: 0;
}

#menu:after {
border-width: 0 0 10px 20px;
border-left-color: #234B5B; /* Color de la sombra del doblez */
right: 0;
} 

#menu ul {
margin-top: 0px;
}

#menu li {
list-style: none;
display: inline;
padding-right:20px;
}

#menu li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #ffffff; /* Color del texto */
font-size: 14px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menu li a:hover {
font-size:16px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;}

Par GloriaV le 16 Juillet 2016 à 20:00

27. Menú horizontal 4 niveles

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

CSS

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
 -webkit-transition: all .35s ease-in;
  transition: all .35s ease-in;

}
 
.nav > li {
float:left;
  
}
 
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border-radius: 10px; border: 4px double #fff;
padding:10px 12px;
}
 
.nav li a:hover {
background:#0fbfc6;
 

}
 
.nav li ul {
display:none;
position:absolute;
min-width:140px;
 
		
}
 
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
 
.nav li ul li ul {
right:-140px;
top:0;
	
}

Par GloriaV le 16 Juillet 2016 à 20:02

28. Menú vertical 4 niveles

<ul class="nav__list">
<li><a href="#">Bienvenido</a></li>
<li><input id="group-1" type="checkbox" /> <label for="group-1"><span class="fa fa-angle-right">&nbsp;</span> Bienvenido</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li><input id="sub-group-1" type="checkbox" /> <label for="sub-group-1"><span class="fa fa-angle-right">&nbsp;</span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><input id="sub-sub-group-1" type="checkbox" /> <label for="sub-sub-group-1"><span class="fa fa-angle-right">&nbsp;</span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><input id="group-2" type="checkbox" /> <label for="group-2"><span class="fa fa-angle-right">&nbsp;</span> Amor</label>
<ul class="group-list">
<li><a href="#">Flash</a></li>
<li><a href="#">1st level item</a></li>
<li><input id="sub-group-2" type="checkbox" /> <label for="sub-group-2"><span class="fa fa-angle-right">&nbsp;</span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><input id="sub-sub-group-2" type="checkbox" /> <label for="sub-sub-group-2"><span class="fa fa-angle-right">&nbsp;</span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><input id="group-3" type="checkbox" /> <label for="group-3"><span class="fa fa-angle-right">&nbsp;</span> First level</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<li><input id="sub-group-3" type="checkbox" /> <label for="sub-group-3"><span class="fa fa-angle-right">&nbsp;</span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><input id="sub-sub-group-3" type="checkbox" /> <label for="sub-sub-group-3"><span class="fa fa-angle-right">&nbsp;</span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><input id="group-4" type="checkbox" /> <label for="group-4"><span class="fa fa-angle-right">&nbsp;</span> First level</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li><input id="sub-group-4" type="checkbox" /> <label for="sub-group-4"><span class="fa fa-angle-right">&nbsp;</span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>

CSS

<style><!--
.nav a, .nav label {
 display: block;
  padding: .85rem;
  color: #000;
  background-color: #fff;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}
 
}
.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(196, 202, 229, 0.5);
 

}
.nav label { cursor: pointer; }
/**
 * Styling first level lists items
 */
.group-list a, .group-list label {
 padding: 2px 7px 2px 2px;
 font-size: 17px;
 font-family: Old English Text MT;
 text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px;
background: #C6E4E6;
 border-radius: 5px;
width:120px;
height: 63px;
border: 1px dotted #ccc; 
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #E6C6DC; }
/**
 * Styling second level list items
 */
.sub-group-list a, .sub-group-list label {
  padding-left: 1rem;
 font-size: 17px;
 font-family: Old English Text MT;
 text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px;
  background:linear-gradient(45deg, #D8C6E6 30%,#ffffff 50%,#C6E4E6 70%);
border-radius: 5px;
 width:120px;
height: 63px;
box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #C6CCE6; }

/**
 * Styling third level list items
 */
.sub-sub-group-list a, .sub-sub-group-list label {
padding-left: 1rem;
  background: #E6E0C6;
  box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #D4E6C6; }
/**
 * Hide nested lists
 */
.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}
.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }
label > span {
  float: right;

  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {

  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
--></style>

Par GloriaV le 16 Juillet 2016 à 20:04

29. Menú vertical 4 niveles!!!

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

CSS cambiar posición

.menuHolder {margin:25px 0 100px 0;
text-align:center;
position: relative;
z-index: 597;
float: left;
position: absolute;
top: 135px;
left: 100px;
background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;

CSS

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

Par GloriaV le 16 Juillet 2016 à 20:06

30. Menú vertical 1 nivel

Fuente: http://www.oloblogger.com/search/label/CSS

Sombra ara texto: http://www.oloblogger.com/2014/06/borde-texto-stroke-shadow.html

<div id="lateral">		<!-- caja: lateral -->
  <div class="mV">		<!-- caja: navegación vertical -->
    <ul class="menu">
      <li><a href="#">Uno</a></li>
      <li><a class="activo" href="#" href="#">Dos mediano</a></li>
      <li><a href="#">Tres más largo</a></li>
    </ul>
  </div>
</div>

CSS

.menu {
	list-style: none;			/* Elimina decoración de listas */
	float: left;
	font-size: 1.1em;
  
}
.menu li a:link, .menu li a:visited {
	text-decoration: none;			/* Elimina decoración de links */
	display: block;				/* Convierte toda la línea en link */
	color: #000000;				/* Color de letra del ítem */
	padding: 2px 10px;			/* Relleno de items de menu */
  border-radius: 5px;
border: 1px dotted #000;
}
.menu li a.activo {
	color: #000;				/* Color de letra del ítem activo */
	background:#59FFFC;			/* Color de fondo del ítem activo */
}
.menu li a:hover {
	color: #ffffff;				/* Color de letra al pasar el cursor */
	background: #ADFAFF;        		/* Color de fondo al pasar el cursor */
	box-shadow: 0px 3px 3px #111111;
}
.mV {						/* Contenedor del menú vertical */
	margin: 0 0 0 10px;
}
.mV li {							
	margin: 4px 0;				/* Separa ítems verticalmente */
	background:-webkit-gradient(linear, 44% 100%, 46% 0%, from(#FFFFFF), to(#C8FFFF))			/* Fondo ítems */
}

Par GloriaV le 17 Juillet 2016 à 14:40

31. Menú vertical 4 niveles(no me funciona)

Fuente:http://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/

<nav class="nav" role="navigation">
  <ul class="nav__list">
    <li>
      <input id="group-1" type="checkbox" hidden />
      <label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li><a href="#">1st level item</a></li>
        <li>
          <input id="sub-group-1" type="checkbox" hidden />
          <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-1" type="checkbox" hidden />
              <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-2" type="checkbox" hidden />
      <label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-2" type="checkbox" hidden />
          <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-2" type="checkbox" hidden />
              <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-3" type="checkbox" hidden />
      <label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-3" type="checkbox" hidden />
          <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
            <li>
              <input id="sub-sub-group-3" type="checkbox" hidden />
              <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
              <ul class="sub-sub-group-list">
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
                <li><a href="#">3rd level nav item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input id="group-4" type="checkbox" hidden />
      <label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
          <li><a href="#">1st level item</a></li>
          <input id="sub-group-4" type="checkbox" hidden />
          <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
          <ul class="sub-group-list">
            <li><a href="#">2nd level nav item</a></li>
            <li><a href="#">2nd level nav item</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.nav a, .nav label {
  display: block;
  padding: .85rem;
  color: #fff;
  background-color: #94DFE2;
  border-radius: 5px; 
  border: 1px dotted #ccc; 
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(0, 0, 0, 0.5);
  background: #E2F7F8;
}

.nav label { cursor: pointer; }
/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #92E3BE;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #92B6E3; }

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #E8A6B3;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #ccc; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #fff;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #ccc; }

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }
label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

Par GloriaV le 17 Juillet 2016 à 14:41

32. Menú vertical 4 niveles

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

CSS

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
 
.nav > li {
float:left;
}
 
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border-radius: 10px; border: 4px double #fff;
padding:10px 12px;
}
 
.nav li a:hover {
background:#0fbfc6;
}
 
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
 
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
 
.nav li ul li ul {
right:-140px;
top:0;
}
  
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
 .nav li a:not(:last-child) .flecha {
display: inline;
}

Par GloriaV le 17 Juillet 2016 à 14:42

33. Menú horizontal 3 niveles

<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>

CSS

body, ul, li {
margin:0;
padding:0;
}
ul {
list-style:none;
display:inline-block;
}
ul li {
float:left;
}
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#C1F2FB;
border-radius: 5px;
border-bottom: 4px solid #0FA7C1;
}
ul#dropdownmenu li {
height:40px;
}
ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#000;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#0D8FA5;
border-radius: 5px;
border: 1px dotted #0FA7C1;
}

ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#84E5F6;
border-radius: 5px;
border: 1px dotted #0FA7C1;
position:absolute;
}
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#fff;
}
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}
ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;

}

Par GloriaV le 17 Juillet 2016 à 16:20

34. Menú horizontal 4 niveles

Fuente: http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/

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

CSS

* {
font-family:Magneto;
list-style:none;
text-decoration:none;
border-radius: 15px;
margin:0;
padding:0;
}
 
.nav > li {
float:left;
}
.nav li a {
background-color:#edb4e9;
background-image: -moz-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -webkit-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -o-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: -ms-radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%);
background-image: radial-gradient(-50% -79%, circle farthest-corner, #edb4e9, #d9b4c9 38%,rgba(240, 228, 235, 0.5) 62%,rgba(222, 213, 219, 0.4) 0%)
border-radius: 15px;
border: 1px dotted #8D0C59;
color:#000;
display:block;
padding:10px 12px;
}
 
.nav li a:hover {
background:#FDE8F4;
  border-radius: 5px;
}

.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
 
.nav li ul li ul {
right:-140px;
top:0;
}
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}

Par GloriaV le 17 Juillet 2016 à 16:21

35. Menú horizontal 3 niveles

<div id='cssmenu'>
  <ul>
     <li class='active'><a href='index.html'>Home</a></li>
     <li class='has-sub '><a href='#'>Products</a>
        <ul>
           <li class='has-sub '><a href='#'>Product 1</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='#'>Product 2</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
</div>

CSS

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
  background: #fff;
  border-radius: 5px;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px; 
}

  #cssmenu > ul { *display: inline-block; }

  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both; 
}
#cssmenu a {
    background: #C7E7FF;
    color: #000;
  border-radius: 20px;
    padding: 0 20px; 
}
#cssmenu ul { text-transform: uppercase; }

    #cssmenu ul ul {
      border-top: 4px solid #1b9bff;
      text-transform: none;
      min-width: 190px; 
}
      #cssmenu ul ul a {
        background: #1b9bff;
        color: #FFF;
  border-radius: 5px;
        border: 1px solid #0082e7;
        border-top: 0 none;
        line-height: 150%;
        padding: 16px 20px; 
}
      #cssmenu ul ul ul { border-top: 0 none; }
      #cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 48px;  }

#cssmenu ul ul li:first-child > a { 
  border-top: 1px solid #0082e7; 
border-radius: 5px;}
        #cssmenu ul ul li:hover > a { 
  background: #35a6ff;
}

        #cssmenu ul ul li:last-child > a {
          border-radius: 0 0 3px 3px;
          box-shadow: 0 1px 0 #1b9bff; 
  border-radius: 20px;
}
        #cssmenu ul ul li:last-child:hover > a { border-radius: 10px 5px 10px 5px; }
        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
}

1 2 3 4