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!
Deja una respuesta