0

Intenté bajar la parte desplegable a partir de donde termina el nav, lo logré, pero el resto de menús(menu2, menu3, menu4,...) se siguen corriendo hacia la derecha. En dónde está el error?

@import url('https://fonts.googleapis.com/css?family=Quicksand');
* {
  box-sizing: border-box;
  font-family: 'Quicksand';
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  display: block;
  padding: .2rem 0;
  color: #000;
  font-size: .875rem;
  text-decoration: none;
}

a:hover {
  color: rgb(235, 161, 24);
  text-decoration: none;
}

h4 {
  margin: .5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
  font-size: 1.25rem;
  font-weight: normal;
}

h5 {
  margin: 0;
  margin-bottom: .5rem;
  font-size: .875rem;
}

nav {
  display: flex;
  background-color: #2c3040;
}

nav::after {
  content: '';
  display: block;
  clear: both;
}

.menu-submenu {
  display: inline-block;
  border-radius: .2rem;
  background: #2c304038;
  position: relative;
  z-index: 2;
  margin-right: 30px;
}


/* .menu-submenu:hover {
  position: absolute;
} */

.subregion {
  margin-top: 40px;
}

.menu-submenu:hover>li {
  display: block;
}

.menu-submenu:hover>li:first-child {
  border-color: transparent;
  border-bottom: none;
  box-shadow: none;
  position: relative;
  z-index: 1;
  color: rgb(235, 161, 24);
  cursor: default;
}


/* .menu-submenu:hover>li:first-child::after {
  content: '\f106';
} */

.menu-submenu:hover>li:last-child {
  border-radius: 0 0 .2rem .2rem;
}

.menu-submenu:hover+.temp::after {
  display: block;
}

.menu-submenu>li {
  background-color: #2c3040;
  display: none;
  width: auto;
  margin: 0;
}

.menu-submenu>li:first-child {
  display: block;
  padding: .65rem;
  background: #2c3040;
  color: white;
  font-size: .875rem;
  cursor: pointer;
}


/* .menu-submenu>li:first-child::after {
  content: '\f107';
  float: right;
} */

.menu-submenu>li:not(:first-child):hover {
  width: calc(960px - 6rem);
  border-right: none;
}

.menu-submenu>li:nth-child(2):hover::before {
  /* content: ''; */
  display: block;
  width: 12rem;
  height: 3rem;
  border: 1px solid transparent;
  position: absolute;
  top: 0;
  z-index: 10;
}

li h3 {
  width: 12rem;
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid transparent;
  border-width: 1px 0;
  background: #fff;
  position: relative;
  z-index: 10;
  font-size: .875rem;
  font-weight: normal;
  cursor: default;
}

li:last-child:hover h3 {
  border-bottom-color: transparent;
  border-radius: 0 0 0 .2rem;
}

li:hover h3 {
  width: calc(12rem + 1px);
  border-color: #bbb;
}

li:hover div {
  display: block;
}

li div {
  display: none;
  width: calc(850px - 6rem - 12rem);
  padding: 1rem 1.2rem;
  border-left: 1px solid #bbb;
  border-radius: 0 .2rem .2rem 0;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12rem;
  z-index: 1;
}

.temp {
  display: flex;
  width: 72%;
  border-radius: .2rem;
  float: right;
  font-size: .875rem;
}

.temp::after {
  content: '';
  display: none;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.temp li {
  padding: .65rem 0;
  flex: 1;
  text-align: center;
  cursor: pointer;
}

main {
  display: flex;
  width: 100%;
  height: 15rem;
  margin-top: 2rem;
  padding: 1rem;
  background: #ccc;
  position: relative;
  z-index: 1;
  clear: both;
}

main p {
  margin: auto;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 60rem) {
  .temp {
    width: 67%;
  }
}
<nav>
  <ul class="menu-submenu">
    <li id>acerca de <i class="fas fa-angle-down"></i></li>
    <li>
      <h3>1</h3>
      <div class="subregion">
        <h4>1</h4>
        <ul>
          <li id="obando" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>2</h3>
      <div class="subregion">
        <h4> 2</h4>
        <ul>
     
          <li><a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>3</h3>
      <div class="subregion">
        <h4>3</h4>
        <ul>
             <li><a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
        </ul>
      </div>
    </li>
   

  </ul>

  <ul class="menu-submenu">
    <li id>Menu2</li>
  </ul>

  <ul class="menu-submenu">
    <li id>Menu3</li>
  </ul>
  <ul class="menu-submenu">
    <li id>Menu4</li>
  </ul>
  <ul class="menu-submenu">
    <li id>Menu5</li>
  </ul>
</nav>

5
  • Te dejo un ejemplo espero te sirva codepen.io/connorbrassington/pen/raNrEW Saludos.
    – tiyeii
    Commented el 22 oct. 2018 a las 22:45
  • 1
    te recomiendo que revises recorrido de bienvenida y que cheques que respuestas se esperan Cómo responder pues una respuesta que solo es un enlace se considera de baja calidad, pues no solo a ti te debe servir si no a futuros usuarios, lo cual se hace dificil si en un momento dado ese link deja de funcionar
    – user75901
    Commented el 23 oct. 2018 a las 0:05
  • Gracias, intenté hacer lo que busco con el ejemplo que me enviaste pero me sigue agregando hacía abajo.. Commented el 23 oct. 2018 a las 0:46
  • @DarioPerez deberías agregar algo más de información, ¿cómo quieres que se vea? (quizás una imagen o un esquema serían de ayuda) ¿cuáles son los menús que no se ven bien? Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 23 oct. 2018 a las 14:49
  • @AlvaroMontoro ya agregué dos items más al menú, los he llamado "Menu2" y "Menú3", pero al pasar el mouse por encima empiezan a titilar. quiero que la parte desplegable de "Donde ir" se conserve, en "Menu2" y "Menú3" no hay parte desplegable o dropdown. Commented el 23 oct. 2018 a las 16:33

1 respuesta 1

2

Lo que pones en los comentarios sucede porque cuando pasas el ratón por encima (hover) cambias el posicionamiento a absoluto. Al poner el posicionamiento absoluto, sacas el elemento del flujo normal de la página y los dos menús resultantes se mueven a la izquierda... provocando que el ratón ya no esté encima del menú abierto y se cierre, quedando de nuevo el ratón encima del menú inicial haciendo que se abra y que cambie a posicionamiento absoluto... que es el parpadeo continuo que ves.

La solución para eso sería quitar el posicionamiento absoluto cuando pasas el ratón por encima (en el CSS es el selector .menu-municipios:hover). Eso soluciona el problema del parpadeo, pero crea otro problema: cuando se abre el menú los otros son empujados hacia abajo.

Para solucionar este nuevo problema, indica que la navegación va a tener un display: flex y eso hará que los elementos dentro floten hacia arriba (incluso cuando uno está abierto).

Aquí lo puedes ver:

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  display: block;
  padding: .2rem 0;
  color: #000;
  font-size: .875rem;
  text-decoration: none;
}

a:hover {
  color: #050505;
  text-decoration: underline;
}

h4 {
  margin: .5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
  font-size: 1.25rem;
  font-weight: normal;
}

h5 {
  margin: 0;
  margin-bottom: .5rem;
  font-size: .875rem;
}


nav {
  display: flex;
}

nav::after {
  content: '';
  display: block;
  clear: both;
}

.menu-municipios {
  display: inline-block;
  border-radius: .2rem;
  background: #fff;
  position: relative;
  z-index: 2;
  margin-right: 30px;
}

.menu-municipios:hover {
  /*position: absolute;*/
}

.menu-municipios:hover>li {
  display: block;
}

.menu-municipios:hover>li:first-child {
  border-color: transparent;
  border-bottom: none;
  background-color: #eee;
  box-shadow: none;
  position: relative;
  z-index: 1;
  color: #444;
  cursor: default;
}

.menu-municipios:hover>li:first-child::after {
  content: '\f106';
}

.menu-municipios:hover>li:last-child {
  border-radius: 0 0 .2rem .2rem;
}

.menu-municipios:hover+.temp::after {
  display: block;
}

.menu-municipios>li {
  display: none;
  width: 12rem;
  margin: 0;
}

.menu-municipios>li:first-child {
  display: block;
  padding: .65rem;
  background: #fff;
  color: #0a0a0a;
  font-size: .875rem;
  cursor: pointer;
}

.menu-municipios>li:first-child::after {
  content: '\f107';
  float: right;
}

.menu-municipios>li:not(:first-child):hover {
  width: calc(960px - 6rem);
  border-right: none;
}

.menu-municipios>li:nth-child(2):hover::before {
  content: '';
  display: block;
  width: 12rem;
  height: 3rem;
  border: 1px solid transparent;
  position: absolute;
  top: 0;
  z-index: 10;
}

li h3 {
  width: 12rem;
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid transparent;
  border-width: 1px 0;
  background: #fff;
  position: relative;
  z-index: 10;
  font-size: .875rem;
  font-weight: normal;
  cursor: default;
}

li:last-child:hover h3 {
  border-bottom-color: transparent;
  border-radius: 0 0 0 .2rem;
}

li:hover h3 {
  width: calc(12rem + 1px);
  border-color: #bbb;
}

li:hover div {
  display: block;
}

li div {
  display: none;
  width: calc(960px - 6rem - 12rem);
  padding: 1rem 1.2rem;
  border-left: 1px solid #bbb;
  border-radius: 0 .2rem .2rem 0;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12rem;
  z-index: 1;
}

.temp {
  display: flex;
  width: 72%;
  border-radius: .2rem;
  float: right;
  font-size: .875rem;
}

.temp::after {
  content: '';
  display: none;
  background: rgba(0, 0, 0, 0.35);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.temp li {
  padding: .65rem 0;
  flex: 1;
  text-align: center;
  cursor: pointer;
}

main {
  display: flex;
  width: 100%;
  height: 15rem;
  margin-top: 2rem;
  padding: 1rem;
  background: #ccc;
  position: relative;
  z-index: 1;
  clear: both;
}

main p {
  margin: auto;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 60rem) {
  .temp {
    width: 67%;
  }
}
<nav>
  <ul class="menu-municipios">
    <li id>Donde Ir <i class="fas fa-angle-down"></i></li>
    <li>
      <h3>Naturaleza</h3>
      <div>
        <h4>Naturaleza</h4>
        <ul>
          <li><a href="#">naturaleza</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3n</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>arquitectura</h3>
      <div>
        <h4>arquitectura</h4>
      </div>
    </li>
    <li>
      <h3>submenu3</h3>
      <div>
        <h4>submenú 3</h4>
      </div>
    </li>
    <li>
      <h3>submenu4</h3>
      <div>
        <h4>submenu4</h4>
      </div>
    </li>
    <li>
      <h3>submenu5</h3>
      <div>
        <h4>submenu5</h4>
      </div>
    </li>
    <li>
      <h3>submenu6</h3>
      <div>
        <h4>submenu6</h4>
      </div>
    </li>
    <li>
      <h3>submenu7</h3>
      <div>
        <h4>submenu7</h4>
      </div>
    </li>
    <li>
      <h3>submenu8</h3>
      <div>
        <h4>submenu8</h4>
      </div>
    </li>

  </ul>

  <ul class="menu-municipios">
    <li id>menu 2 <i class="fas fa-angle-down"></i></li>
  </ul>

  <ul class="menu-municipios">
    <li id>menu 3 <i class="fas fa-angle-down"></i></li>
  </ul>

  <!-- begin snippet: js hide: false console: true babel: false -->
  

2
  • Me ha servido mucha tu ayuda, pero se me dificulta el tema del posicionamiento de los elementos, bajé la parte desplegable a partir de donde termina el nav, pero el resto de menús(menu2, menu3, menu4,...) se siguen corriendo hacia la derecha cuando despliego el menu "Donde ir". Commented el 26 oct. 2018 a las 18:30
  • @DarioPerez lee mi comentario en tu respuesta. Le echo un ojo en un rato. Saludos
    – Alvaro Montoro
    Commented el 26 oct. 2018 a las 18:32

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.