Hola buenos dias tengo un problemita. Quiero hacer un menú desplegable de 2 niveles con flexbox y no logro hacer que me funcione. Copio el codigo para que vean el problema por favor.
<header class="site-header contenedor">
<div class="menu-area">
<ul>
<li><a href="">Menú</a>
<ul class="dropdown-1">
<li><a href="#">Inicio</a></li>
<li><a href="#">Quienes Somos</a></li>
<li><a href="#">Musica</a></li>
<li><a href="#">Artistas</a></li>
<li><a href="#">Galeria</a>
<ul class="dropdown-2">
<li><a href="">Fotos</a></li>
<li><a href="">Videos</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</li>
<li></li>
<li><a href="">Novedades</a></li>
</ul>
</div><!--Menú de navegación-->
</header>
Ahora Coloco el css. El submenu-1 (dropdown-1) deberia ocultarse y aparecer cuando haga hover sobre menú pero no cumple con la función. El submenu-2 (dropdown-2) se ocultó pero no aparece cuando hago hover sobre galeria. No logro solucionar y entender la creación de esos menues.
html {
font-size: 62.5%; /** Reset para REMS - 62.5% = 10px de 16px (1rem = 16px default)**/
box-sizing: border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.5;
background-color: #ffffff;
}
/*Globales*/
img {
max-width: 100%;
}
.contenedor {
width: 95%;
max-width: 120rem;
margin: 0 auto;
}
h1 {
font-family: 'PT Sans', sans-serif;
font-size: 3.8rem;
}
h2 {
font-family: 'Oswald', sans-serif;
font-size: 3.4rem;
}
h3 {
font-size: 3rem;
}
h4 {
font-size: 2.6rem;
}
/*Utilidades*/
.seccion {
margin-top: 2rem;
margin-bottom: 2rem;
height: 30rem;
}
.fw-300 {
font-weight: 300;
}
.centrar-texto {
text-align: center;
}
.contenido-centrado {
max-width: 80rem;
}
/********************Fin Utilidades******************/
/**Header**/
.menu-area a {
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background-color: #000000;
height: 5rem;
text-decoration: none;
text-transform: uppercase;
}
.menu-area:hover {
background-color: tomato;
color: #ffffff;
}
.menu-area ul {
list-style: none;
display: flex;
}
.menu-area ul li {
position: relative;
width: 100%;
text-align: center;
}
.menu-area li:hover .dropdown-1 > li {
top: 0;
display: block;
}
.dropdown-1 ul li {
display: none;
position: relative;
}
.dropdown-1 {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
}
.dropdown-1 ul li:hover .dropdown-2 ul li {
display: block;
}
.dropdown-2 ul li {
display: none;
}
.dropdown-2 {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 100%;
width: 40rem;
}
Este sería todo el codigo. Una solución estará Excelente. Gracias