Skip to main content

Menu desplegable flexbox

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.

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

Este sería todo el codigo. Una solución estará Excelente. Gracias