Ejemplo de menú vertical con submenú horizontal mediante CSS

Ejemplo de menú vertical con submenú horizontal mediante CSS

Print Friendly, PDF & Email
Ejemplo de menú vertical con submenú horizontal mediante CSS
Valora esta entrada

En esta lectura vamos a crear un menú vertical con un submenú horizontal cuando se desplace el ratón por encima de un elemento <li> que anide una lista.

Previa a esta lectura es interesante leer como crear un menú horizontal con menú desplegable vertical.

El código html usado es el siguiente:

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

    li a{
    text-decoration:none;
    display:block;
    padding:5px 10px;
    width:120px;
    border:1px solid #000;
    color:#fff;
    background-color:#000;
    }
            
    li a:hover{
    color:#000;
    background-color:#fff;
    }
            
    li>ul{
    display:none;
    position:absolute;
    top:0px;
    left:120px;
    }
    
    li:hover>ul{
    display:block;
    }
            
    li > ul >li{
    float:left;
    }

¡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?

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

Entradas relacionadas:

Ejercicio sobre selectores css (III)
- 67
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. Incluye solución.
Resumen de como comentar código en html, css y javascript
- 772
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Estilos css para enlaces. :link, :visited:, :hover, :active
- 38
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
Guía rápida para crear botones personalizados con CSS
- 194
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Como centrar un texto mediante CSS y no con HTML
- 879
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Maquetar una página de prestashop 1.6 con bootstrap
- 567
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
¿Maquetar con float:left o con display:inline-block? Ejercicio css
- 42
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. 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.
Pseudo Clases :link, :active, :hover y :visited
- 164
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
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.
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.