•  

    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;
    }

     


  •  

    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;
    }

  •  

    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*/
    

     


  •  

    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;
    }

     


  •  

    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);
    }

  •  

    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%;
    }
    
    }

  •  

    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;
    }

  •  

    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;
    }
    }

  •  

    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;
    }
    

     


  •  

    25. Menú

     


  •  

    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;}

     


  •  

    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;
    	
    }

     


  •  

    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>

     


  •  

    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);
    }

     


  •  

    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 */
    }

     


  •  

    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);
    }

  •  

    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;
    }
     
    

     


  •  

    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%;
    
    }

  •  

    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;
    }

  •  

    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;
    }