1 de mayo de 2017

Menú vertical desplegable con HTML y CSS

Menús verticales desplegables solo con HTML y CSS


En dos publicaciones de este blog he visto cómo se puede añadir un menú horizontal desplegable en Blogger de dos formas distintas,


Hoy voy a crear un menú vertical desplegable.

Los menús horizontales son muy útiles para facilitar la navegación al usuario y lograr una rápida y fácil localización del contenido. Suelen situarse en la cabecera del blog o página.

Los menús verticales se acomodan principalmente en los laterales o sidebar del blog aunque pueden situarse en cualquier otra parte. Son muy recomendables para información o contenido complementario que no queremos incluir en la barra de navegación principal pero que sea fácilmente accesible para el usuario.

Me he encontrado con cierta dificultad para obtener información a cerca de estos menús que se despliegan verticalmente porque la mayor parte trata sobre los menús de navegación horizontales por ser los más habituales en páginas web y blogs.

En esta entrada voy a explicar cómo crear tres tipos de menús que se despliegan verticalmente, únicamente con el uso de HTML y CSS.


Estos menús que sirven de ejemplo se pueden personalizar al gusto y necesidades del blogger o diseñador web, bien su estilo y aspecto modificando el código CSS (los códigos de los colores pueden obtenerse en la página RapidTables)  o la estructura del menú editando el lenguaje HTML de la plantilla o página.

Para incluir estos menús en el blog debemos añadir un gadget HTML/Javascript en la zona del blog en la que queremos que se muestre (cabecera, barra lateral, pie de página...).
Ver cómo añadir un menú desplegable en un blog.
En este ejemplo se añade un menú de navegación en la zona del blog "Multicolumnas" pero puede seleccionarse otra área dentro del menú Diseño. También podemos consultar cómo añadir el código CSS a la plantilla para dar formato al menú.



Menú vertical desplegable: Pasos a seguir


Lo primero es hacer una copia de seguridad

A continuación sobre un papel detallamos la estructura del menú para evitar olvidos, errores o complicaciones, sobre todo si se trata de un menú complejo y muy ramificado. 

Ahora decidimos qué tipo de menú vertical vamos a crear y diseñar.

El siguiente paso es crear el menú con HTML y por último darle formato con CSS.



Crear el menú de navegación jerárquica. Estructura en árbol


Voy a determinar el menú de navegación desplegable en forma de árbol, con menú y submenús siguiendo una estructura jerárquica.

Arbol jerárquico menú desplegable vertical con CSS y HTML

Consta de un único menú principal que está formado por dos menús secundarios (Menú Números y Menú Letras). A su vez, cada uno de los menús secundarios contiene tres submenús. Estos submenús dependen jerárquicamente del único menú principal.

Este tipo de menú vertical tiene un único menú principal mientras que los menús desplegables horizontales están integrados por varios menús principales.

El Menú principal no conducirá a ninguna página, solamente nos dará acceso a los menús secundarios (Menú Números y Menú Letras). De igual modo, los menús secundarios no abren ninguna página pero permiten acceder a los submenús, que sí nos van a dirigir a un enlace relacionado con el contenido relacionado a su título.


Ahora que ya está definida la estructura del menú tengo que convertirla al lenguaje HTML. 

Como se trata de una lista no ordenada voy a usar la etiqueta <ul> que encierra la lista no ordenada y <li> para cada elemento de esta lista.

<ul>
  <li>Menú Principal</li>
      <ul>
          <li>Menú Números</li>
            <ul>
                <li><a href="URLPagina">Submenú 1</a></li>
                <li><a href="URLPagina">Submenú 2</a></li>
                <li><a href="URLPagina">Submenú 3</a></li>
            </ul>
          <li>Menú Letras</li>
            <ul>
                <li><a href="URLPagina">Submenú A</a></li>
                <li><a href="URLPagina">Submenú B</a></li>
                <li><a href="URLPagina">Submenú C</a></li>
            </ul>
      </ul>
</ul>


Los títulos de los menús y submenús van entre etiquetas <li> por tratarse de elementos de la lista no ordenada <ul> que abre y cierra todo el árbol jerárquico. Pero a su vez estos elementos <li> de la lista tienen anidada otra lista no ordenada <ul> con sus elementos <li> dentro de ella.

El menú desplegable ( entre primera <ul> y última </ul> )  solo tiene un elemento <li> que es el Menú Principal.
Cuando pasemos el ratón o hagamos clic sobre "Menú Principal", se harán visibles dos elementos <li> que son los menús secundarios "Menú Números" y "Menú Letras" y que irán encerrados entre <ul> y </ul> para definir nueva lista no ordenada. Pero estos menús secundarios también se desplegarán cada uno de ellos haciendo visibles tres submenús, así que debo incluir dentro de cada uno de los menús secundarios otra lista no ordenada <ul> con los submenús como elementos <li>.



Menú vertical en una columna con efecto hover


Para diseñar un menú vertical que se despliegue en una sola columna mediante efecto hover (posicionando el ratón sobre los menús) voy a modificar el código HTML inicial para adaptarlo a este tipo de menú.

El efecto es el siguiente,






HTML para menú vertical en una columna con efecto hover


El código HTML correspondiente a este tipo de menú es el siguiente,

<nav id="menu">
      <ul>
            <li><a href="">Menú principal</a></li>
                  <ul>
                       <li><a href="">Menú Números</a></li>
                               <ul>
                                     <li><a href="URLPagina">Submenú 1</a></li>
                                     <li><a href="URLPagina">Submenú 2</a></li>
                                     <li><a href="URLPagina">Submenú 3</a></li>
                               </ul>
                       <li><a href="">Menú Letras</a></li>
                               <ul>
                                     <li><a href="URLPagina">Submenú A</a></li>
                                     <li><a href="URLPagina">Submenú B</a></li>
                                     <li><a href="URLPagina">Submenú C</a></li>
                               </ul>
                  </ul>
      </ul>
</nav>


El código es prácticamente igual al inicial, únicamente he añadido dentro de los elementos <li> correspondientes al menú principal y secundarios la etiqueta de enlaces <a> pero dejando el atributo href vacío [href=""] porque estos menús no nos dirigirán a otra página. Lo incluyo con el fin de poder dar estilo al título de estos menús.
Por el contrario, para los submenús sí incluyo la dirección URL de la página a la quiero dirigir al usuario.


CSS para menú vertical en una columna con efecto hover


El código CSS que hay que añadir es el mostrado a continuación (hacer clic sobre la barra),


#menu {                                               /*estilo para la caja contenedor del menú de navegación*/
    padding: 0px;                               /*relleno caja*/
    width: 200px;                             /*alto caja*/
    border: 5px solid #51575c;    /*estilo borde caja contenedor*/
    border-radius: 5px;               /*borde redondeado*/
    background: radial-gradient(circle, snow 45%, white 65%, grey);           /*fondo*/
    overflow: visible;             /*desbordamiento de caja visible*/
    }
   
#menu ul ul {                 /*oculta los menús secundarios*/
    display: none;
    }
   
#menu ul:hover > ul {      /*efecto hover sobre menú principal para dar visibilidad a los menús secundarios*/
    display: block;
    }

#menu ul li {                           /*caja Menú Principal*/
    font-size: 20px;                 /*tamaño letra*/
    width: 180px;                  /*ancho caja*/
    height: 30px;                  /*alto caja*/
    padding: 4px 0 0 0;      /*relleno caja*/
    position: relative;       /*posición relativa*/
    left: -31px;                 /*posición referenciada a la izquierda*/
    background: linear-gradient(gray 15%, #000000 90%) !important;       /*fondo degradado lineal*/   
    border: 1px solid #000000;           /*estilo borde caja contenedor*/
    border-radius: 4px;                       /*caja borde redondeado*/
    text-align: center;                       /*texto alineado al centro*/
    list-style: none;                         /*los elementos de la lista no tienen marcadores*/
    }

#menu ul li a {                               /*título Menú Principal*/
    color: silver;                             /*color letra*/
    text-decoration: none;         /*texto no subrayado*/
    }
       
#menu ul li:hover {                                /*hover sobre Menú Principal*/
    padding: 8px 0 0 0;                          /*relleno*/
    font-weight: bold !important;     /*texto en negrilla*/
    background: linear-gradient(black 15%, gray 90%) !important;   /*fondo degradado lineal*/   
    border: 1px solid #000000;     /*estilo borde caja contenedor*/
   }    
 
#menu ul ul li {                          /*cajas menús secundarios*/
    position: relative;                /*posición relativa*/
    padding: 5.5px 0 0 0;        /*relleno*/
    margin: 1.8px;                  /*margen*/
    left: -73px;                      /*posición referenciada a la izquierda*/
    background: linear-gradient(gray 15%, #000000 90%) !important;   /*fondo degradado lineal*/   
    border-top: 2px solid black;             /*estilo borde superior caja contenedor*/
    border-right: 2.5px solid black;     /*estilo borde derecho caja contenedor*/
    border-left: 1px solid black;         /*estilo borde izquierdo caja contenedor*/
    border-radius: 3px;                     /*borde redondeado*/
    overflow: visible;                       /*desbordamiento visible*/
    color: #000000 !important;                               /*color texto*/
    text-shadow: 0 2px 0 gold !important;          /*sombra del texto*/
    font-weight: 200 !important;                        /*grosor de la fuente*/
    }

#menu ul ul li:hover {                                    /*hover sobre menús secundarios*/
  display: block;                                            /*mostrar submenús*/
  background: white !important;            /*fondo blanco*/
   }
   
#menu ul ul ul li {                   /*caja submenús*/
    display: block;                   /*mostrar submenús*/
    position: relative;           /*posición relativa*/
    left:-113px;                    /*posición referenciada a la izquierda*/
    top:-1px;                      /*posición referenciada zona superior*/
    background: linear-gradient(#FF8C07 15%, #000000 90%) !important;   /*fondo degradado lineal*/
    }
   
#menu ul ul ul li:hover {                         /*hover sobre submenus*/
    display: block;                                    /*mostrar submenús*/
    background: white !important;    /*fondo blanco*/
    }    
   
#menu ul ul li a {                                                                /*estilo título de los submenús*/ 
    color: #000000 !important;                                       /*color letra*/
    font-family: leelawadee, arial, serif !important;  /*tipo letra*/
    font-size: 18px !important;                                    /*tamaño letra*/ 
    font-variant: small-caps !important;                  /*variante versalita del tipo de letra */
    list-style: none;                                                     /*los elementos de la lista no tienen marcadores*/
    display: block;                                                     /*disposición en bloque*/
    padding: 0 0 2px 0;                                          /*relleno*/ 
    text-shadow: 0 1px 0 gold !important;      /*sombra del texto*/
    font-weight: 300 !important;                    /*grosor de la fuente*/
    text-decoration: none;                             /*texto sin subrayar*/
    }

#menu ul ul ul li:hover a {                              /*estilo efecto hover sobre títulos submenús*/
     background: #E8E4C8 !important;        /*fondo*/       
     font-weight: 500 !important;               /*grosor fuente*/
     }




Menú vertical en dos columnas con efecto hover


En este segundo ejemplo, el menú vertical en lugar de desplegarse en una sola columna (menú principal, menús secundarios y submenús), los submenús se mostrarán en una segunda columna paralela a la columna que incluye el menú principal y menús secundarios.

El menú ahora se muestra así,







HTML para menú vertical en dos columnas con efecto hover


El siguiente cuadro contiene el código HTML correspondiente a este segundo tipo de menú,

<nav id="menu2">
<ul id='menuprincipal'>
    <li>Menú Principal
        <ul id='menusecundario'>
            <li>Menú Números
                <ul id='menunum'>
                    <li><a href="URLPagina">Submenú 1</a></li>
                    <li><a href="URLPagina">Submenú 2</a></li>
                    <li><a href="URLPagina">Submenú 3</a></li>
                </ul>
            </li>  
            <li >Menú Letras
                <ul id='menuletras' >
                    <li><a href="URLPagina">Submenú A</a></li>
                    <li><a href="URLPagina">Submenú B</a></li>
                    <li><a href="URLPagina">Submenú C</a></li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>
</nav>


En el ejemplo anterior usé el atributo id (identificador único) para asignar a un solo elemento: <nav>

En este segundo ejemplo voy a utilizar id para identificar a los elementos <ul>.

<ul id='menuprincipal'> Identifica la lista global (con menú principal, menús secundarios y submenús). Por eso se abre tras la etiqueta <nav> y se cierra antes de </nav>.

<ul id='menusecundario'> Identifica la lista de los menús secundarios y submenús.

<ul id='menunum'> Identifica la lista de los submenús corrspondientes al menú secundario Menú Números.

<ul id='menuletras'> Identifica la lista de los submenús corrspondientes al menú secundario Menú Letras.

Elimino los elementos de enlace <a> que existían en el ejemplo del menú anterior. Como se puede comprobar, ahora no se verá un cursor en forma de mano cuando se posicione el ratón sobre el Menú Principal o sobre los menús secundarios (Menú Números y Menú Letras).



CSS para menú vertical en dos columnas con efecto hover


El código CSS que he que añadido es el mostrado a continuación (hacer clic sobre la barra),


 #menu2 {                            /*estilo caja contenedor de la lista global*/
    padding: 0px;                /*relleno*/             
    width: 200px ;             /*ancho caja*/
    overflow: visible;      /*desbordamiento caja visible*/
    }

#menuprincipal {             /*estilo caja menú principal*/
    overflow: visible;       /*desbordamiento caja visible*/
    }

#menusecundario, #menunum, #menuletras  {   /*oculta los menús secundarios y submenús*/
    display: none;
    } 

#menuprincipal li:hover > #menusecundario {   /*hover sobre Menú Principal hace visibles menus secundarios*/
    display: block;
    }

#menuprincipal li {                      /*estilo Menú Principal*/
    font-size: 20px;                       /*tamaño letra*/
    width: 180px;                        /*ancho caja*/
    height: 30px;                        /*alto caja*/
    padding: 4px 0 0 0;            /*relleno caja*/
    position: relative;             /*posición relativa*/
    left: -32px;                       /*posición referenciada a la izquierda*/
    background: linear-gradient(gray 15%, #000000 90%) !important;    /*fondo caja*/
    border: 1px solid #000000;       /*estilo borde caja*/
    border-radius: 8px;                   /*caja borde redondeado*/
    text-align: center;                    /*texto alineado al centro*/
    list-style: none;                      /*los elementos de la lista no tienen marcadores*/
    color: gainsboro;                 /*color letra*/ 
    text-decoration: none;     /*letra sin subrayar*/
    }

#menuprincipal li:hover {                          /*hover sobre Menú Principal*/
    background: linear-gradient(black 15%, gray 90%) !important;   /*fondo degradado lineal*/
    border: 1px solid #000000;               /*estilo borde caja contenedor*/
    color: azure;                                       /*color letra*/
    font-weight: bold !important;       /*letra negrilla*/
    } 

#menusecundario, #menunum, #menuletras {    /*estilo caja menús secundarios*/
    width: 500px;                                                       /*ancho caja*/
    height: 500px;                                                    /*alto caja*/
    background: transparent;                              /*fondo transparente*/
    }

#menuletras {                      /*estilo caja menús secundarios*/
position: absolute;
z-index: 999;                    /*visible con elementos superpuestos*/
 }

#menusecundario li {                                /*estilo caja menús secundarios*/
    padding: 5.5px 0 0 0;                           /*relleno caja*/
    margin: 1.8px;                                     /*margen caja*/
    width: 160px;                                    /*ancho caja*/
    border-top: 2px solid black;         /*estilo borde superior caja contenedor*/
    border-right: 2.5px solid black;  /*estilo borde derecho caja contenedor*/
    border-left: 1px solid black;     /*estilo borde izquierdo caja contenedor*/
    border-radius: 3px;                  /*caja borde redondeado*/
    overflow: visible;                    /*desbordamiento visible*/
    position: relative;                 /*posición relativa*/
    top: -8.7px;                          /*posición referenciada arriba*/        
    left: -43px;                         /*posición referenciada a la izquierda*/
    background: linear-gradient(azure 25%, dimgray 50%, gainsboro) !important;   /*fondo degradado lineal*/
    color: black !important;                                      /*color letra*/
    font-size: 90% !important;                                /*tamaño letra al 90% del título menú principal*/
    text-shadow: 0 1px 0 azure !important;       /*sombra del texto*/
    }

#menusecundario li:hover {                                        /*hover sobre menús secundarios*/
    border-bottom: 4px solid black !important;       /*estilo borde caja contenedor*/
    border-right: 3px solid black !important;          /*estilo borde caja contenedor*/
    border-left: 2px solid black !important;           /*estilo borde caja contenedor*/
    box-shadow: 10px 10px 5px #888888;           /*sombra caja*/
    border-radius: 5px !important;                      /*caja borde redondeado*/
    color: #000000 !important;                           /*color letra*/
    text-shadow: 0 2px 0 gold !important;      /*sombra del texto*/
    font-weight: 200 !important;                     /*grueso de letra*/
    list-style: none;                                           /*los elementos de la lista no tienen marcadores*/
    }

#menusecundario li:hover > #menunum, #menusecundario li:hover > #menuletras {     /*hover en menús secundarios hace visible submenús*/
    display: block;
    }

#menunum li, #menuletras li {          /*estilo submenús*/
    position: relative;                           /*posición relativa*/
    left: 115px;                                    /*posición referenciada a la izquierda*/
    top:-40px;                                    /*posición referenciada arriba*/
    background: linear-gradient(#FF8C07 15%, #000000 90%) !important;   /*fondo degradado lineal*/
    }

#menunum li:hover, #menuletras li:hover {   /*hover submenús fondo transparente*/
    background: transparent !important;
    }

#menusecundario li a {                                    /*estilo título menús secundarios*/
    color: silver;                                                 /*color texto*/
    font-size: 20px !important;                     /*tamaño de letra*/
    font-variant: small-caps !important;   /*variante versalita del tipo de letra */
    font-weight: 300 !important;             /*grueso de letra*/
    list-style: none;                                   /*los elementos de la lista no tienen marcadores*/
    padding: 0 0 2px 0;                          /*relleno*/
    text-decoration: none;                  /*letra sin subrayado*/
    }

 #menusecundario li a:hover {                                               /*hover sobre títulos menús secundarios*/
    color: #000000 !important;                                              /*color letra*/
    font-family: leelawadee, arial, serif !important;         /*tipo de letra*/
    font-size: 20px !important;                                           /*tamaño de letra*/
    font-variant: small-caps !important;                         /*variante versalita del tipo de letra */
    font-weight: 300 !important;                                   /*grueso de letra*/
    list-style: none;                                                         /*los elementos de la lista no tienen marcadores*/
    padding: 0 0 2px 0;                                                /*relleno*/
    text-shadow: 0 1px 0 gold !important;            /*sombra del texto*/
    text-decoration: none;                                      /*letra sin subrayado*/
    }

 #menunum li a, #menuletras li a {                                     /*estilo título submenús*/
    color: black !important;                                                  /*color letra*/
    font-weight: 200 !important;                                       /*grosor fuente*/
    font-family: leelawadee, arial, serif !important;     /*tipo de letra*/
    text-shadow: 0 1px 0 gold !important;                   /*sombra de letra*/
    }

#menunum li:hover a, #menuletras li:hover a {    /*efecto hover sobre títulos submenús*/
    background: #E8E4C8 !important;                    /*fondo*/
    margin: 0px 0 0 0 !important;                          /*margen*/
    font-weight: 500 !important;                         /*grosor fuente*/
    }




Menú vertical en una columna desplegable con checked


Por último voy a crear un menú vertical de una sola columna que se desplegará mediante checked.

El atributo checked nos permite indicar que un elemento está seleccionado. Es un atributo booleano, por lo tanto no admite ningún valor como true o false porque su presencia lleva implícito el valor true indicando que el elemento está seleccionado. Si no aparece se supone un valor false.

En este ejemplo las funciones del atributo checked serán las siguientes,

   - Haciendo clic sobre el Menú Principal, expandirá y hará visibles los menús secundarios (Menú Números y Menú Letras)

   - Con clic sobre menús sencundarios (Menú Números o Menú Letras), se expandirán y se harán visibles los submenús correspondientes a cada uno de los menús secundarios.

   - Clic sobre Menú Números hará visibles los submenús (Submenú 1-Submenú 2-Submenú 3).
    
   - Clic sobre Menú Letras hará visibles los submenús (Submenú A-Submenú B-Submenú C).

HTML para menú vertical en una columna con checked

El efecto es el siguiente,








HTML para menú vertical en una columna con checked

El código HTML es el siguiente,

<nav id="menu3">
   <label class="show-menu3" for="show-menu3">Menú Principal</label>
   <input id="show-menu3" type="checkbox" />
        <ul id="menusecundario3">
           <li>
               <label class="show-num3" for="show-num3">Menú Números</label>
               <input id="show-num3" type="checkbox" />
                  <ul class="menunum3">
                     <li><a href="URLPagina">Submenú 1</a></li>
                     <li><a href="URLPagina">Submenú 2</a></li>
                     <li><a href="URLPagina">Submenú 3</a></li>
                  </ul>
           </li>
           <li>
               <label class="show-letras3" for="show-letras3">Menú Letras</label>
               <input id="show-letras3" type="checkbox" />
                  <ul class="menuletras3">
                     <li><a href="URLPagina">Submenú A</a></li>
                     <li><a href="URLPagina">Submenú B</a></li>
                     <li><a href="URLPagina">Submenú C</a></li>
                  </ul>
           </li>
      </ul>
</nav>


<input type="checkbox">

En este menú incluyo el elemento <input> con el atributo type cuyo valor es "checkbox".

El elemento <input> permite crear controles interactivos y su funcionamiento depende del valor de su atributo <type> que especifica el tipo de elemento <input> que se mostrará.

El valor checkbox (casilla de verificación o selección) permite al usuario elegir entre una o varias opciones.

Utilizo el elemento <input type="checkbox"> en el menú principal y en cada uno de los menús secundarios (Menú Números y Menú Letras) para que el usuario tenga posibilidad de seleccionar cada una de ellos si se decide a navegar por el menú.

El primer elemento <input> se sitúa justo después de <nav> porque contiene el resto de los menús, por lo tanto para el usuario solo estará visible la etiqueta del Menú Principal excepto en el caso que haga clic sobre ella, porque esta acción hará visibles a los dos menús secundarios.

Añado el elemento <label> para asociar el texto "Menú Principal" mediante el atributo for con el elemento  <type>.
El valor de identificación tiene que ser el mismo (id y for tienen que tener el mismo valor), en este ejemplo es "show-menu3".

A continuación añado el elemento de lista no ordenada <ul> que incluye dos elementos de la lista <li> para cada uno de los menús secundarios (Menú Números y Menú Letras).
Como quiero que el usuario, una vez seleccione la etiqueta del Menú Principal que desplegará los menús secundarios, seleccione un menú secundario para seguir navegando y acceder a sus submenús, incluyo tras el elemento <li>, los elementos <label> e <input>.



CSS para menú vertical en una columna con checked


El código CSS que hay que añadir es el mostrado a continuación (hacer click sobre la barra),


#menu3 {                                                    /*estilo caja menú de navegación*/
    width: 180px;                                       /*ancho caja*/
    height: auto;                                       /*alto caja calculado por navegador*/
    padding: 16px 0 0px 20px;             /*relleno*/
    position: absolute;                        /*posición fija respecto a su ancestro más cercano*/
    border: 5px solid #51575c;        /*estilo borde caja*/
    border-radius: 5px;                    /*borde redondeado caja*/
    background: radial-gradient(circle, snow 5%, white 15%, grey);   /*fondo*/
    overflow: visible;                    /*contenido visible con desborde*/
    }
 
#menusecundario3 {               /*caja de menús secundarios*/
    list-style-type: none;         /*no son visibles los marcadores de la lista*/
    position: relative;            /*posición relativa*/
    overflow: visible;          /*contenido visible con desborde*/
    }

#menu3 label {                                      /*caja etiqueta menú principal*/
    width: 160px;                                   /*ancho caja*/
    height: 32px;                                   /*alto caja*/
    padding: 3px 0 0px 0px;              /*relleno de label*/
    margin: 0 0 14px 0;                    /*margen de label*/ 
    display: block;                           /*comportamiento en bloque*/
    }

#menusecundario3 li {             /*caja de etiquetas menús secundarios*/
    padding: 0px 0 3px 0px;     /*relleno*/
    }

.show-menu3 {                                         /*caja titulo Menú Principal*/
    position: relative;                               /*posición relativa*/
    text-decoration: none;                    /*sin decoración texto subrayado*/
    background: linear-gradient(gray 15%, #000000 90%) !important;           /*fondo degradado lineal*/
    border: 1px solid #000000;        /*estilo borde caja contenedor*/
    border-radius: 5px;                    /*caja con borde redondeado*/  
    font-size: 20px;                         /*tamaño letra*/
    color: silver;                            /*color texto*/
    line-height: 26px;                 /*altura caja inline para posición del título*/
    text-align: center;               /*texto alineado al centro*/
    list-style: none;                 /*sin marcadores de lista*/
    cursor: pointer;               /*cursor en forma de mano sobre link*/
    }
  
 .show-num3, .show-letras3 {      /*cajas etiquetas label menús secundarios*/
    position: relative;                    /*posición relativa*/
    text-decoration: none;         /*sin decoración texto subrayado*/
    overflow: visible;                 /*contenido visible con desborde*/
    background: linear-gradient(gray 15%, #000000 90%) !important;   /*fondo degradado lineal*/
    border-top: 2px solid black;              /*estilo borde superior caja*/
    border-right: 2.5px solid black;       /*estilo borde derecho caja*/
    border-left: 1px solid black;           /*estilo borde izquierdo caja*/
    border-radius: 3px;                        /*caja con borde redondeado*/ 
    color: #000000 !important;        /*color texto*/
    text-shadow: 0 1.5px 0 gold !important;          /*sombra del texto*/
    font-weight: 200 !important;                            /*grueso de la fuente*/ 
    font-size: 20px;                                                  /*tamaño de letra*/
    text-align: center;                                            /*texto alineado al centro*/ 
    line-height: 30px;                                          /*altura caja inline para posición del título*/
    cursor: pointer;                                           /*cursor en forma de mano sobre link*/
    }
  
#menusecundario3 li label {                       /*caja etiquetas menús secundarios*/
    position: relative;                                   /*posición relativa*/
    width: 180px;                                        /*ancho caja*/
    height: 34px;                                       /*alto caja*/
    margin: 0px 0px 3px -51.5px;         /*margen*/
    }

.show-menu3:hover {                                       /*hover sobre Menú Principal*/
    background: linear-gradient(black 15%, gray 90%) !important;                 /*fondo degradado lineal*/
    border: 1px solid #000000;                     /*estilo bordes caja*/
    color: azure;                                             /*color texto*/
    font-weight: bold !important;             /*letra en negrilla*/
    } 

.show-num3:hover, .show-letras3:hover {                        /*hover sobre label menús secundarios*/
    border-top: 1px solid gray !important;                        /*estilo borde superior caja*/
    border-right: 1.5px solid gray !important;                /*estilo borde derecho caja*/
    border-left: 0px solid black !important;                  /*estilo borde izquierdo caja*/
    background: linear-gradient(rgba(255, 165, 0, 0.5) 10%, lightgray 65%, oldlace 85%) !important;
    color: black !important;                                         /*color letra*/
    box-shadow: 2px 3px rgba(77,39,11,0.8);        /*sombra de la caja*/
    text-shadow: -1px -1px gold, 1px 1px black !important;       /*sombra texto*/
    }

.menunum3, .menuletras3 {           /*lista no ordenada de submenús*/
list-style-type: none;                       /*no son visibles los marcadores de la lista*/
}

.menunum3 li a, .menuletras3 li a {                             /*títulos submenús*/
    position: relative;                                                      /*posición relativa*/
    width: 135px !important;                                      /*ancho*/
    padding: 0 20px;                                                   /*relleno*/
    left: -91px;                                                           /*margen izquierdo*/
    overflow: visible;                                              /*contenido visible con desborde*/
    background: linear-gradient(rgba(242,225,206, 0.9) 45%, dimgrey 95%, beige) !important;
    border-radius: 5px;                                      /*caja con borde redondeado*/      
    border-top: 0.1px solid gray !important;                  /*estilo borde superior caja*/
    border-right: 2px solid silver !important;               /*estilo borde derecho caja*/
    border-left: 0.2px solid darkgray !important;      /*estilo borde izquierdo caja*/
    border-bottom: 1px solid gray !important;        /*estilo borde inferior caja*/
    font-size: 19px !important;                                 /*tamaño de letra*/ 
    font-variant: small-caps !important;               /*variante versalita del tipo de letra */
    color: black !important;                                  /*color letra*/
    text-decoration: none;                                  /*sin decoración texto subrayado*/
    text-shadow: 0px 1px 0px gold !important;     /*sombra del texto*/
    text-align: center;                                                /*texto alineado al centro*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /*tipo de letra*/
    line-height: 40px;                                            /*altura caja inline para posición del título*/
    letter-spacing: 0.08em;                                /*espaciado letras*/
    display: block;                                              /*disposición en bloque*/
    }

#menusecundario3 li:hover a {                                 /*submenús con hover sobre label menús secundarios*/
    background: radial-gradient(circle, snow 5%, white 15%, grey) !important;         /*fondo*/
    border-top: 0px solid black !important;          /*estilo borde superior caja*/
    border-right: 1.5px solid black !important;  /*estilo borde derecho caja*/
    border-left: 0px solid black !important;      /*estilo borde izquierdo caja*/
    color: black !important;                               /*color letra*/
    text-shadow: -1px -1px azure, 1px 1px black !important;        /*sombra texto*/ 
    }

#menusecundario3 li ul li a:hover {                                    /*hover sobre submenús*/
    background: linear-gradient(rgba(242,225,206, 0.9) 45%, dimgrey 95%, beige) !important;
    font-family: leelawadee, arial, serif !important;     /*tipo de letra*/
    font-variant: small-caps !important;                       /*variante versalita del tipo de letra */
    text-shadow: 0px 1px 0px gold !important;        /*sombra del texto*/
    font-weight: 600 !important;                              /*grueso de la fuente*/  
    text-decoration: none;                                       /*sin decoración texto subrayado*/
    letter-spacing: 0.1em;                                    /*espaciado letras*/ 
    }

input[type="checkbox"] {               /*para eliminar el cuadro de check*/
   opacity: 0;
   }

#menusecundario3, .menunum3, .menuletras3 {         /*oculta los menús secundarios*/
    display: none;
    } 
 
input[type=checkbox] {            /*oculta el checkbox*/
    display: none;
    }

/*Se despliega el menú con checked en Menú Principal y menús sencudarios*/
#show-menu3:checked ~ #menusecundario3, #show-num3:checked ~ .menunum3, #show-letras3:checked ~ .menuletras3 {
    display: block;
    }