0

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

1

1 respuesta 1

0

No te esta funcionando el CSS porque no estas ocultando los elementos que debes ocultar.

Para los menus desplegables, tienes que ocultar las ul enteras, y ya seleccionando el li que la activara con hover debes hacer display block o flex, alguno de los dos, no los dos a la vez.

Una vez hecho esto ya puedes ir dandole la forma que quieras. Te paso un código ejemplo, he tomado el tuyo y lo he modificado un poco:

/**Header**/

.menu-area a {
  color: #ffffff;
  background-color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 300ms;
  padding: 10%;
}

.menu-area:hover a {
  background-color: tomato;
  color: #ffffff;
}

.menu-area>ul {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.menu-area>ul li {
  list-style: none;
  margin: 2%;
}

.dropdown-1 {
  display: none;
  position: absolute;
  margin-top: 1%;
  transition: all 300ms;
  margin-left: -80px;
}

.first-menu {
  min-height: 100px;
}

.first-menu:hover .dropdown-1 {
  display: flex;
  flex-flow: column wrap;
}

.first-menu:hover .dropdown-1>li {
  margin: 16%;
  width: 160%;
}

.dropdown-2 {
  display: none;
  position: absolute;
  margin-top: 1%;
  transition: all 300ms;
  margin-left: 100px;
}

.galeria:hover .dropdown-2 {
  display: flex;
  flex-flow: row wrap;
  margin-top: 0;
}

.galeria:hover .dropdown-2>li {
  margin: 15%;
  margin-top: 0;
}
<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>

El CSS porque el HTML lo tienes perfecto! saludos

3
  • 1
    @ArianJM excelentes respuestas. Me ayudaron un monton Commented el 18 feb. 2021 a las 16:52
  • @luishernandez genial, me alegro. Quizá quieras aceptar la respuesta. Y agradecer a Jose Antonio, que es quien respondió originalmente, yo solo lo edité.
    – ArianJM
    Commented el 19 feb. 2021 a las 14:40
  • 1
    Soy nuevo en stackoverflow y no entiendo mucho pero ahi voy aprendiendo de a poco. Pero por supuesto. @JoseAntonio su ayuda se aprecia enormemente igualmente. Commented el 3 mar. 2021 a las 18:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.