Menú vertical desplegable con CSS

Crear un menú vertical desplegable sin necesidad de utilizar JavaScript es posible. Empleando CSS y HTML para crear las listas es suficiente.

En este artículo vamos a ver como crear un menú sencillo, vertical y desplegable creando la plantilla HTML y el código CSS necesario.

En el ejemplo que vamos a ilustrar presentamos unos estilos muy simples que pueden ser modificados muy fácilmente a través de la hoja de estilos CSS.

El menú vertical desplegable está pensado para situarlo en alguna de las columnas (izquierda o derecha) de tu página Web, así que deberás posicionarte en esa parte del código de tu página para añadir una lista anidada con ul y li dentro de un contenedor con id=»menu». En el caso del ejemplo en funcionamiento tenemos lo siguiente:

<div id="menu">
    <ul>
        <li class="has-sub"><a title="" href="https://www.jose-aguilar.com/tienda/es/3-prestashop">Prestashop</a>
            <ul>
                <li class="has-sub"><a title="" href="#">Módulos</a>
                    <ul>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/3-backoffice">Administración</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/4-busqueda-y-filtros">Búsqueda y filtros</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/12-publicidad-y-marketing">Publicidad y Marketing</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/8-front-office">Front Office</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/7-exportacion-e-importacion">Importación y Exportación</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/10-formas-de-pago">Formas de pago</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/5-precios-descuentos-y-ofertas">Precio y Descuentos</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/14-seo">SEO</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/6-envios-y-logistica">Transporte y Logística</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/13-redes-sociales">Redes Sociales</a></li>
                        <li><a title="" href="https://www.jose-aguilar.com/modulos-prestashop/es/15-modulos-gratis">GRATIS</a></li>
                    </ul>
                 </li>
                 <li><a title="" href="#">Themes</a></li>
             </ul>
        </li>
        <li class="has-sub"><a title="" href="https://www.jose-aguilar.com/blog/secciones/wordpress/">WordPress</a>
        <li class="has-sub"><a title="" href="https://www.jose-aguilar.com/blog/secciones/joomla/">Joomla</a>
    </ul>
</div>

El código anterior no es más que la lista de los elementos del menú con varios niveles. La clave del asunto está en la hoja de estilos que presentamos a continuación:

#menu {
    padding: 0;
    margin: 0;
    border: 0; 
}
 
#menu ul, li {
    list-style: none;
    margin: 0;
    padding: 0; 
}
 
#menu ul {
    position: relative;
    z-index: 597;
    float: left; 
}
 
#menu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle; 
}
 
#menu ul li.hover,
#menu ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default; 
}
 
#menu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%; 
}
 
#menu ul ul li {
    float: none; 
}
 
#menu ul li:hover > ul {
    visibility: visible; 
}
 
#menu ul ul {
    top: 0;
    left: 100%; 
}
 
#menu ul li {
    float: none; 
}
 
#menu {
    width: 255px; 
}
 
#menu span, #menu a {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none; 
}
 
#menu:after, #menu ul:after {
    content: '';
    display: block;
    clear: both; 
}
 
#menu ul, #menu li {
    width: 100%; 
}
#menu li {
    background: #dddddd;
}
#menu li:hover {
    background: #f6f6f6; 
}
#menu a {
    color: #666666;
    line-height: 160%;
    padding: 11px 28px 11px 28px;
    width: 253px; 
}
#menu ul ul li {
    background: #f6f6f6; 
}
#menu ul ul li:hover {
    background: #dddddd; 
}
#menu ul ul li:hover a {
    color: #666666; 
}
#menu ul ul li ul li {
    background: #dddddd; 
}
#menu ul ul li ul li:hover {
    background: #b7b7b7; 
}
#menu .has-sub {
    position: relative; 
}
 
#menu .has-sub:after, #menu .has-sub > ul > .has-sub:hover:after {
    content: '';
    display: block;
    width: 10px;
    height: 9px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px;
}
 
#menu .fa-angle-right {
    float: right;
}

Obteniendo como resultado:

menu-vertical-desplegable

Ver demo Descargar

Esta entrada ha sido actualizada el 05/11/2018.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (16 votos, promedio: 4,38 de 5)
Cargando…
Comparte en las redes sociales

16 respuestas a “Menú vertical desplegable con CSS”

  1. david dice:

    muy útil e ideal para proyectos que no puede usar muchos recursos.

  2. Raúl dice:

    Hola, ¿qué cambios habría que hacer en tu código para que las subcategorías se mostrasen debajo de su categoría padre y no a la derecha de la categoria padre? Es decir, al poner el ratón sobre «prestashop», se mostraría «modulos» y «themes» debajo de prestashop con una pequeña sangría y «wordpress», «joomla» y «proyectos» quedaría debajo de «modulos» y «themes» sin la sangria. Lógicamente solo habrá un nivel de subcategoría, no habría otro desplegable al poner el raton sobre «modulos» o «themes».
    Muchas gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre