Ejemplo de menú vertical con submenú desplegable vertical (CSS)

Ejemplo de menú vertical con submenú desplegable vertical (CSS)

Print Friendly, PDF & Email
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
Valora esta entrada

En esta lectura vamos a crear un menú vertical con un submenú desplegable vertical cuando se desplace el ratón por encima de un elemento <li> que esté anidando un elemento <ul>.

Esta lectura es una variante de esta otra. Las dos son muy similares.

El código html usado es el siguiente:

menú desplegable vertical en menú vertical
<nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Quiénes somos</a></li>
            <li><a href="#">Servicios</a><ul>
                <li><a href="#">Servicio A</a></li>
                <li><a href="#">Servicio B</a></li>
                <li><a href="#">Servicio C</a></li>
            </ul></li>
            <li><a href="#">Contacto</a></li>
        </ul>
</nav>

Código CSS usado

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    }
                  
    li{
    list-style-type:none;
    position:relative;
    width:120px;
    }
                
    li a{
    text-decoration:none;
    display:inline-block;
    padding:5px 10px;
    width:120px;
    height:30px;
    border:1px solid #000;
    color:#fff;
    background-color:#000;
    }
            
    li a:hover{
    color:#000;
    background-color:#fff;
                
    }
    
    nav li ul{
        display:none;
        position:absolute;
        top:0px;
        left:120px;
    }
            
    nav li:hover ul{display:block;}

Fijaros que al submenú le damos un posicionamiento absoluto y lo desplazamos hacia la derecha justamente 120px. 120px es el ancho que hemos dado a los elementos <li>.

Esto lo hacemos así porqué de no hacerlo el efecto hover producte un efecto que también desplaza a la pestaña de nombre contacto.

El resto del código es muy similar al de esta publicación.

¡Hola!

Querido lector,

Ahora sólo faltaría implementarlo en una página web.

Puedes descargar el código en este enlace.

¿Te animas a hacer un menú vertical con submenú vertical pero en este caso con javascript? Encontrarás la solución en el tutorial javascript.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Menú horizontal con submenú desplegable horizontal mediante CSS
- 366
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 271
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Como poner iconos flotantes de redes sociales en nuestra web con html y css
- 49
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 420
Código html y css de como crear un menú vertical con un submenú horizontal.
Ejercicio nivel básico sobre selectores CSS
- 42
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
¿Qué posicionamiento css se ha usado?
- 47
Ejercicio visual dónde se debe indicar que tipo de posicionamiento se ha usado para desplazar una caja. Incluye solución y explicación.
La propiedad z-index
- 109
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Box Sizing, como modificar el modelo de cajas convencional
- 321
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Ejercicio sobre la propiedad clear:both (float)
- 39
Ejercicio para practicar de una forma muy visual el uso de la propiedad clear:both | left | right; de css cuando se apilan cajas mediante la propiedad float. Incluye solución.
Ejercicio diferencia entre centrado de texto y de cajas en css
- 49
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.