Menú horizontal con submenú desplegable horizontal mediante CSS

Menú horizontal con submenú desplegable horizontal mediante CSS

Print Friendly, PDF & Email
Menú horizontal con submenú desplegable horizontal mediante CSS
Valora esta entrada

Esta publicación es una variante de la creación de un menú horizontal con desplegable vertical.

Las siguientes lecturas te pueden resultar de interés:

  1. Ejemplo de creación de un menú vertical con desplegable horizontal.
  2. Ejemplo de creación de un menú horizontal con desplegable vertical.

Para mi gusto (y es una opinión sesgada) este ejemplo es de más dificultad que los anteriores.

El resultado que queremos obtener es algo parecido a la imagen siguiente:

menu horizontal submenu horizontal

El código html usado es el siguiente:

<header>
        <nav>
        <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Quiénes somos</a>
            <ul><li><a href="">Historia</a></li>
            <li><a href="">Prensa</a></li></ul>
            </li>
        <li><a href="#">Servicios</a>
            <ul><li><a href="">Servicio 1</a></li>
            <li><a href="">Servicio 2</a></li>
            <li><a href="">Servicio 3</a></li>
            <li><a href="">Servicio 4</a></li></ul>
            </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
        </ul>
        </nav>
    </header>

Estrategia combinación inline-block y posicionamiento absoluto

*{margin:0;padding:0;box-sizing:border-box;font-size:0;}  

header{
    width:100%;
    max-width:900px;
    margin:auto;
            }
nav{
    position:relative;
    top:100px;
    margin:auto;

}
        
nav a{
    text-decoration:none;
    color:inherit;
    font-size:14px;
}
            
nav li{
    display:inline-block;
    width:150px;
    height:30px;
    padding:5px 10px;
    border:1px solid #000;
    text-align:center;
    background-color:#000;
    color:#fff;
}
            
nav li:hover{
    background-color:#fff;
    color:#000;
}
            
nav li>ul{
position:absolute;
left:0px;
top:30px;
display:block;
}
            
nav li>ul{
    display:none;
}            

nav li:hover>ul{
    display:block;
}

La estrategia usada para crear un menú horizontal es asignar a los elementos <li> la propiedad display:inline-block; 

Si los elementos <ul> son suficientemente anchos los <li> anidados se apilarán unos al lado de otro.

La dificultad está en conseguir que los <ul> anidados dentro de un <li> no queden limitados por el ancho disponible del <li> que los anida.

Para ellos damos un posicionamiento relativo al <nav> y un posicionamiento absoluto a los <ul> que estén dentro de un <li> con el desplazamiento que deseemos. Más concretamente la altura exacta definida para los elementos <li>. Y les damos display:block; para asegurarnos que como elemento bloque ocupen el 100% del ancho disponible. Ahora los <li> ya tienen espacio para apilarse.

Una vez conseguido este efecto el resto es jugar con :hover y con display:none; igual que se hace en las lecturas recomendadas al inicio de este escrito.

¡Hola!

Querido lector,

Conseguido este ejemplo el ejercicio de dificultad creciente sería conseguir un tercer nivel desplegable.

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

Entradas relacionadas:

Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
¿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.
Ejercicio css sobre la propiedad box-shadow (css3)
- 36
Ejercicio para practicar con la propiedad box-shadow de css. Incluye solución.
Creación de una página web en mantenimiento con html y css
- 37
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Selectores CSS. Que son y como usarlos
- 306
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
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.
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.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 613
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Mi chuleta de instrucciones CSS para dar formato al texto
- 74
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
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.
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.