Menú horizontal con submenú desplegable horizontal mediante CSS

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:

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!