Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
<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>

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>

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

}

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>

Origen Enlace

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.

<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