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 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
    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. el 3 mar. 2021 a las 18:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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