Skip to main content
se eliminaron 6862 caracteres en el cuerpo
Origen Enlace
@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-municipiossubmenu {
  display: inline-block;
  border-radius: .2rem;
  background: #2c304038;
  position: relative;
  z-index: 2;
  margin-right: 30px;
}


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

.subregion {
  margin-top: 40px;
}

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

.menu-municipiossubmenu: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-municipiossubmenu:hover>li:first-child::after {
  content: '\f106';
} */

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

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

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

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


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

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

.menu-municipios>lisubmenu>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-municipios">submenu">
    <li id>Dondeid>acerca Irde <i class="fas fa-angle-down"></i></li>
    <li>
      <h3>Obando<<h3>1</h3>
      <div class="subregion">
        <h4>Obando<<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="#">Aldana</a></li>
          <li><a href="#">Contadero</a></li>
          <li><a href="#">Córdoba</a></li>
          <li><a href="#">Cuaspud</a></li>
          <li><a href="#">Cumbal</a></li>
          <li><a href="#">Funes</a></li>
          <li><a href="#">Guachucal</a></li>
          <li><a href="#">Gualmatan</a></li>
          <li><a href="#">Iles</a></li>
          <li><a href="#">Ipiales</a></li>
          <li><a href="#">Potosí</a></li>
          <li><a href="#">Puerres</a></li>
          <li><a href="#">Pupiales</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Río Mayo</h3>
      <div class="subregion">
        <h4>Río Mayo</h4>
        <ul>
          <li id="rioMayo" style="float:right"><img src="http://1.bp.blogspot.com/_dM3DF_UfkD0/SiiJMG8GsUI/AAAAAAAAAIE/86_usiW4WyA/s400/Mapa_Politico_Mudo_America.gif" alt="Mapa Nariño"></li>
          <li><a href="#">Albán</a></li>
          <li><a href="#">Belén</a></li>
          <li><a href="#">Colón</a></li>
          <li><a href="#">El Tablón</a></li>
          <li><a href="#">La Cruz</a></li>
          <li><a href="#">San Bernardo</a></li>
          <li><a href="#">San Pablo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Centro</h3>
      <div class="subregion">
        <h4>Centro</h4>
        <ul>
          <li id="centro" style="float:right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Provincias_de_Ais%C3%A9n.svg/300px-Provincias_de_Ais%C3%A9n.svg.png" alt="Mapa Nariño"></li>
          <li><a href="#">Pasto</a></li>
          <li><a href="#">Chachagüi</a></li>
          <li><a href="#">La Florida</a></li>
          <li><a href="#">Nariño</a></li>
          <li><a href="#">Tangua</a></li>
          <li><a href="#">Yacuanquer</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>La Sabana</h3>
      <div class="subregion">
        <h4>La Sabana</h4>
        <ul>
          <li id="sabana" style="float:right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzB1Eu83lXqkcvCzVajCik0Y9sqcnRWGrQScuTJUNlPuUlG88m" alt="Mapa Nariño"></li>
          <li><a href="#">Guatarilla</a></li>
          <li><a href="#">Imúes</a></li>
          <li><a href="#">Ospina</a></li>
          <li><a href="#">Sapuyes</a></li>
          <li><a href="#">Tuquerres</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Sanquianga</h3>
      <div class="subregion">
        <h4>Sanquianga</h4>
        <ul>
          <li id="sanguianga" style="float:right"><img src="https://cloud.educaplay.com/recursos/44/1411011/imagen_1.png" alt="Mapa Nariño"></li>
          <li><a href="#">El Charco</a></li>
          <li><a href="#">La Tola</a></li>
          <li><a href="#">Mosquera</a></li>
          <li><a href="#">Holaya Herrera</a></li>
          <li><a href="#">Santa Barvara</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Juanambú</h3>
      <div class="subregion">
        <h4>Juanambú</h4>
        <ul>
          <li id="juanambu" style="float:right"><img src="https://i.pinimg.com/originals/8e/32/a8/8e32a86195850d0338fa7f0f08bee08d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Arboleda</a></li>
          <li><a href="#">Buesaco</a></li>
          <li><a href="#">La Unión</a></li>
          <li><a href="#">San Pedro de Cartago</a></li>
          <li><a href="#">San Lorenzo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Cordillera</h3>
      <div class="subregion">
        <h4>Cordillera</h4>
        <ul>
          <li id="cordillera" style="float:right"><img src="https://ugc.kn3.net/i/origin/http://us.123rf.com/400wm/400/400/maxxyustas/maxxyustas1102/maxxyustas110200125/8919988-mapa-de-argentina-en-los-colores-de-la-bandera-argentina-3d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Cumbitara</a></li>
          <li><a href="#">El Rosario<href="#">a</a></li>
          <li><a href="#">Leiva<href="#">b</a></li>
          <li><a href="#">Policarpa<href="#">c</a></li>
          <li><a href="#">Taminango<href="#">d</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Occidente<<h3>2</h3>
      <div class="subregion">
        <h4>Occidente</h4>
        <ul>
          <li id="occidente" style="float:right"><img src="http://alo.co/sites/default/files/dynimagecache/291-0-548-731-300-400/mapa_4.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Ancuya</a></li>
          <li><a href="#">Consacá</a></li>
          <li><a href="#">Linares</a></li>
          <li><a href="#">Sandoná</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Guambuyaco</h3>
      <div class="subregion">
       <h4> <h4>Guambuyaco<2</h4>
        <ul>
          <li id="guambuyaco" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">El Peñol</a></li>
          <li><a href="#">El Tambo</a></li>
          <li><a href="#">La llanada<href="#">a</a></li>
          <li><a href="#">Los Andes Sotomayor</a></li>
          <li>
            <a href="#"></a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pacifico Sur</h3>
      <div class="subregion">
        <h4>Pacifico Sur</h4>
        <ul>
          <li id="pacificoSur" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Franciscoa<href="#">b</a></li>
          <li><a href="#">Pizarro<href="#">c</a></li>
          <li><a href="#">Tumaco<href="#">d</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Los abades<<h3>3</h3>
      <div class="subregion">
        <h4>Los abades<<h4>3</h4>
        <ul>
          <li id="losAbades" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Providencia</a></li>
          <li><a href="#">Samaniego</a></li>
          <li><a href="#">Santa Cruz<href="#">a</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Telembí</h3>
      <div class="subregion">
        <h4>Telembí</h4>
        <ul>
          <li id="Telembi" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Barbacoas<href="#">b</a></li>
          <li><a href="#">Magüí Payan<href="#">c</a></li>
          <li><a href="#">Roberto Payán<href="#">d</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pie de Monte Costero</h3>
      <div class="subregion">
        <h4>Pie de Monte Costero</h4>
        <ul>
          <li id="PieMonteCostero" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Mallama</a></li>
          <li><a href="#">Ricaurte</a></li>
        </ul>
      </div>
    </li>


  </ul>

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

  <ul class="menu-municipios">submenu">
    <li id>Menu3</li>
  </ul>
  <ul class="menu-municipios">submenu">
    <li id>Menu4</li>
  </ul>
  <ul class="menu-municipios">submenu">
    <li id>Menu5</li>
  </ul>
</nav>
@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-municipios {
  display: inline-block;
  border-radius: .2rem;
  background: #2c304038;
  position: relative;
  z-index: 2;
  margin-right: 30px;
}


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

.subregion {
  margin-top: 40px;
}

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

.menu-municipios: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-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 {
  background-color: #2c3040;
  display: none;
  width: auto;
  margin: 0;
}

.menu-municipios>li:first-child {
  display: block;
  padding: .65rem;
  background: #2c3040;
  color: white;
  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(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-municipios">
    <li id>Donde Ir <i class="fas fa-angle-down"></i></li>
    <li>
      <h3>Obando</h3>
      <div class="subregion">
        <h4>Obando</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="#">Aldana</a></li>
          <li><a href="#">Contadero</a></li>
          <li><a href="#">Córdoba</a></li>
          <li><a href="#">Cuaspud</a></li>
          <li><a href="#">Cumbal</a></li>
          <li><a href="#">Funes</a></li>
          <li><a href="#">Guachucal</a></li>
          <li><a href="#">Gualmatan</a></li>
          <li><a href="#">Iles</a></li>
          <li><a href="#">Ipiales</a></li>
          <li><a href="#">Potosí</a></li>
          <li><a href="#">Puerres</a></li>
          <li><a href="#">Pupiales</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Río Mayo</h3>
      <div class="subregion">
        <h4>Río Mayo</h4>
        <ul>
          <li id="rioMayo" style="float:right"><img src="http://1.bp.blogspot.com/_dM3DF_UfkD0/SiiJMG8GsUI/AAAAAAAAAIE/86_usiW4WyA/s400/Mapa_Politico_Mudo_America.gif" alt="Mapa Nariño"></li>
          <li><a href="#">Albán</a></li>
          <li><a href="#">Belén</a></li>
          <li><a href="#">Colón</a></li>
          <li><a href="#">El Tablón</a></li>
          <li><a href="#">La Cruz</a></li>
          <li><a href="#">San Bernardo</a></li>
          <li><a href="#">San Pablo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Centro</h3>
      <div class="subregion">
        <h4>Centro</h4>
        <ul>
          <li id="centro" style="float:right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Provincias_de_Ais%C3%A9n.svg/300px-Provincias_de_Ais%C3%A9n.svg.png" alt="Mapa Nariño"></li>
          <li><a href="#">Pasto</a></li>
          <li><a href="#">Chachagüi</a></li>
          <li><a href="#">La Florida</a></li>
          <li><a href="#">Nariño</a></li>
          <li><a href="#">Tangua</a></li>
          <li><a href="#">Yacuanquer</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>La Sabana</h3>
      <div class="subregion">
        <h4>La Sabana</h4>
        <ul>
          <li id="sabana" style="float:right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzB1Eu83lXqkcvCzVajCik0Y9sqcnRWGrQScuTJUNlPuUlG88m" alt="Mapa Nariño"></li>
          <li><a href="#">Guatarilla</a></li>
          <li><a href="#">Imúes</a></li>
          <li><a href="#">Ospina</a></li>
          <li><a href="#">Sapuyes</a></li>
          <li><a href="#">Tuquerres</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Sanquianga</h3>
      <div class="subregion">
        <h4>Sanquianga</h4>
        <ul>
          <li id="sanguianga" style="float:right"><img src="https://cloud.educaplay.com/recursos/44/1411011/imagen_1.png" alt="Mapa Nariño"></li>
          <li><a href="#">El Charco</a></li>
          <li><a href="#">La Tola</a></li>
          <li><a href="#">Mosquera</a></li>
          <li><a href="#">Holaya Herrera</a></li>
          <li><a href="#">Santa Barvara</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Juanambú</h3>
      <div class="subregion">
        <h4>Juanambú</h4>
        <ul>
          <li id="juanambu" style="float:right"><img src="https://i.pinimg.com/originals/8e/32/a8/8e32a86195850d0338fa7f0f08bee08d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Arboleda</a></li>
          <li><a href="#">Buesaco</a></li>
          <li><a href="#">La Unión</a></li>
          <li><a href="#">San Pedro de Cartago</a></li>
          <li><a href="#">San Lorenzo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Cordillera</h3>
      <div class="subregion">
        <h4>Cordillera</h4>
        <ul>
          <li id="cordillera" style="float:right"><img src="https://ugc.kn3.net/i/origin/http://us.123rf.com/400wm/400/400/maxxyustas/maxxyustas1102/maxxyustas110200125/8919988-mapa-de-argentina-en-los-colores-de-la-bandera-argentina-3d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Cumbitara</a></li>
          <li><a href="#">El Rosario</a></li>
          <li><a href="#">Leiva</a></li>
          <li><a href="#">Policarpa</a></li>
          <li><a href="#">Taminango</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Occidente</h3>
      <div class="subregion">
        <h4>Occidente</h4>
        <ul>
          <li id="occidente" style="float:right"><img src="http://alo.co/sites/default/files/dynimagecache/291-0-548-731-300-400/mapa_4.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Ancuya</a></li>
          <li><a href="#">Consacá</a></li>
          <li><a href="#">Linares</a></li>
          <li><a href="#">Sandoná</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Guambuyaco</h3>
      <div class="subregion">
        <h4>Guambuyaco</h4>
        <ul>
          <li id="guambuyaco" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">El Peñol</a></li>
          <li><a href="#">El Tambo</a></li>
          <li><a href="#">La llanada</a></li>
          <li><a href="#">Los Andes Sotomayor</a></li>
          <li>
            <a href="#"></a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pacifico Sur</h3>
      <div class="subregion">
        <h4>Pacifico Sur</h4>
        <ul>
          <li id="pacificoSur" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Franciscoa</a></li>
          <li><a href="#">Pizarro</a></li>
          <li><a href="#">Tumaco</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Los abades</h3>
      <div class="subregion">
        <h4>Los abades</h4>
        <ul>
          <li id="losAbades" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Providencia</a></li>
          <li><a href="#">Samaniego</a></li>
          <li><a href="#">Santa Cruz</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Telembí</h3>
      <div class="subregion">
        <h4>Telembí</h4>
        <ul>
          <li id="Telembi" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Barbacoas</a></li>
          <li><a href="#">Magüí Payan</a></li>
          <li><a href="#">Roberto Payán</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pie de Monte Costero</h3>
      <div class="subregion">
        <h4>Pie de Monte Costero</h4>
        <ul>
          <li id="PieMonteCostero" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Mallama</a></li>
          <li><a href="#">Ricaurte</a></li>
        </ul>
      </div>
    </li>


  </ul>

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

  <ul class="menu-municipios">
    <li id>Menu3</li>
  </ul>
  <ul class="menu-municipios">
    <li id>Menu4</li>
  </ul>
  <ul class="menu-municipios">
    <li id>Menu5</li>
  </ul>
</nav>
@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>
se añadieron 12991 caracteres en el cuerpo
Origen Enlace

Quiero que juntoIntenté bajar la parte desplegable a "Donde Ir" se añadan más itemspartir de forma horizontaldonde termina el nav, pero cuando lo intentologré, pero el resto de menús(menu2, menu3, menu4,...) se van listandosiguen corriendo hacia abajo en la parte desplegablederecha. ¿Cómo podría hacerloEn dónde está el error?

Éste es mi código:

@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: #050505;rgb(235, 161, 24);
  text-decoration: underline;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-municipios {
  display: inline-block;
  border-radius: .2rem;
  background: #fff;#2c304038;
  position: relative;
  z-index: 2;
  margin-right: 30px;
} 


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

.subregion {
  margin-top: 40px;
}

.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;rgb(235, 161, 24);
  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 {
  background-color: #2c3040;
  display: none;
  width: 12rem;auto;
  margin: 0;
}

.menu-municipios>li:first-child {
  display: block;
  padding: .65rem;
  background: #fff;#2c3040;
  color: #0a0a0a;white;
  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(960px850px - 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>Obando</h3>
      <div><div class="subregion">
        <h4>Naturaleza<<h4>Obando</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="#">naturaleza<href="#">Aldana</a></li>
          <li><a href="#">2<href="#">Contadero</a></li>
          <li><a href="#">3n<href="#">Córdoba</a></li>
          <li><a href="#">4<href="#">Cuaspud</a></li>
          <li><a href="#">5<href="#">Cumbal</a></li>
          <li><a href="#">6<href="#">Funes</a></li>
          <li><a href="#">7<href="#">Guachucal</a></li>
          <li><a href="#">Gualmatan</a></li>
          <li><a href="#">Iles</a></li>
          <li><a href="#">Ipiales</a></li>
          <li><a href="#">Potosí</a></li>
          <li><a href="#">Puerres</a></li>
          <li><a href="#">Pupiales</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>arquitectura<<h3>Río Mayo</h3>
      <div><div class="subregion">
        <h4>arquitectura<<h4>Río Mayo</h4>
        <ul>
          <li id="rioMayo" style="float:right"><img src="http://1.bp.blogspot.com/_dM3DF_UfkD0/SiiJMG8GsUI/AAAAAAAAAIE/86_usiW4WyA/s400/Mapa_Politico_Mudo_America.gif" alt="Mapa Nariño"></li>
          <li><a href="#">Albán</a></li>
          <li><a href="#">Belén</a></li>
          <li><a href="#">Colón</a></li>
          <li><a href="#">El Tablón</a></li>
          <li><a href="#">La Cruz</a></li>
          <li><a href="#">San Bernardo</a></li>
          <li><a href="#">San Pablo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu3<<h3>Centro</h3>
      <div>
<div class="subregion">
       <h4>submenú 3<<h4>Centro</h4>
        <ul>
          <li id="centro" style="float:right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Provincias_de_Ais%C3%A9n.svg/300px-Provincias_de_Ais%C3%A9n.svg.png" alt="Mapa Nariño"></li>
          <li><a href="#">Pasto</a></li>
          <li><a href="#">Chachagüi</a></li>
          <li><a href="#">La Florida</a></li>
          <li><a href="#">Nariño</a></li>
          <li><a href="#">Tangua</a></li>
          <li><a href="#">Yacuanquer</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu4<<h3>La Sabana</h3>
      <div><div class="subregion">
        <h4>submenu4<<h4>La Sabana</h4>
        <ul>
          <li id="sabana" style="float:right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzB1Eu83lXqkcvCzVajCik0Y9sqcnRWGrQScuTJUNlPuUlG88m" alt="Mapa Nariño"></li>
          <li><a href="#">Guatarilla</a></li>
          <li><a href="#">Imúes</a></li>
          <li><a href="#">Ospina</a></li>
          <li><a href="#">Sapuyes</a></li>
          <li><a href="#">Tuquerres</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu5<<h3>Sanquianga</h3>
      <div><div class="subregion">
        <h4>submenu5<<h4>Sanquianga</h4>
        <ul>
          <li id="sanguianga" style="float:right"><img src="https://cloud.educaplay.com/recursos/44/1411011/imagen_1.png" alt="Mapa Nariño"></li>
          <li><a href="#">El Charco</a></li>
          <li><a href="#">La Tola</a></li>
          <li><a href="#">Mosquera</a></li>
          <li><a href="#">Holaya Herrera</a></li>
          <li><a href="#">Santa Barvara</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu6<<h3>Juanambú</h3>
      <div><div class="subregion">
        <h4>submenu6<<h4>Juanambú</h4>
        <ul>
          <li id="juanambu" style="float:right"><img src="https://i.pinimg.com/originals/8e/32/a8/8e32a86195850d0338fa7f0f08bee08d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Arboleda</a></li>
          <li><a href="#">Buesaco</a></li>
          <li><a href="#">La Unión</a></li>
          <li><a href="#">San Pedro de Cartago</a></li>
          <li><a href="#">San Lorenzo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu7<<h3>Cordillera</h3>
      <div><div class="subregion">
        <h4>submenu7<<h4>Cordillera</h4>
        <ul>
          <li id="cordillera" style="float:right"><img src="https://ugc.kn3.net/i/origin/http://us.123rf.com/400wm/400/400/maxxyustas/maxxyustas1102/maxxyustas110200125/8919988-mapa-de-argentina-en-los-colores-de-la-bandera-argentina-3d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Cumbitara</a></li>
          <li><a href="#">El Rosario</a></li>
          <li><a href="#">Leiva</a></li>
          <li><a href="#">Policarpa</a></li>
          <li><a href="#">Taminango</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>submenu8<<h3>Occidente</h3>
      <div><div class="subregion">
        <h4>submenu8<<h4>Occidente</h4>
        <ul>
          <li id="occidente" style="float:right"><img src="http://alo.co/sites/default/files/dynimagecache/291-0-548-731-300-400/mapa_4.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Ancuya</a></li>
          <li><a href="#">Consacá</a></li>
          <li><a href="#">Linares</a></li>
          <li><a href="#">Sandoná</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Guambuyaco</h3>
      <div class="subregion">
        <h4>Guambuyaco</h4>
        <ul>
          <li id="guambuyaco" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">El Peñol</a></li>
          <li><a href="#">El Tambo</a></li>
          <li><a href="#">La llanada</a></li>
          <li><a href="#">Los Andes Sotomayor</a></li>
          <li>
            <a href="#"></a>
          </li>
        </ul>
      </div>
  <ul class="menu-municipios"> </li>
    <li<li>
 id>menu 2 <i class="fas fa <h3>Pacifico Sur</h3>
      <div class="subregion">
        <h4>Pacifico Sur</h4>
        <ul>
          <li id="pacificoSur" style="float:right"><img src="https://es-anglestatic.z-down"><dn.net/i><files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Franciscoa</a></li>
          <li><a href="#">Pizarro</a></li>
          <li><a href="#">Tumaco</a></li>
        </ul>
      </div>
  <ul class="menu </li>
    <li>
      <h3>Los abades</h3>
      <div class="subregion">
        <h4>Los abades</h4>
        <ul>
          <li id="losAbades" style="float:right"><img src="https://es-municipios">static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Providencia</a></li>
          <li><a href="#">Samaniego</a></li>
          <li><a href="#">Santa Cruz</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Telembí</h3>
      <div class="subregion">
        <h4>Telembí</h4>
        <ul>
          <li id>menuid="Telembi" 3style="float:right"><img <isrc="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" class="fasalt="Mapa faNariño"></li>
          <li><a href="#">Barbacoas</a></li>
          <li><a href="#">Magüí Payan</a></li>
          <li><a href="#">Roberto Payán</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pie de Monte Costero</h3>
      <div class="subregion">
        <h4>Pie de Monte Costero</h4>
        <ul>
          <li id="PieMonteCostero" style="float:right"><img src="https://es-anglestatic.z-down"><dn.net/i><files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Mallama</a></li>
          <li><a href="#">Ricaurte</a></li>
        </ul>
      </div>
    </li>


  <!/ul>

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

  <ul class="menu-municipios">
 begin snippet: js hide:<li falseid>Menu3</li>
 console: true</ul>
 babel: false<ul class="menu-municipios">
    <li id>Menu4</li>
  </ul>
  <ul class="menu->municipios">
    <li id>Menu5</li>
  </ul>
</nav>

Quiero que junto a "Donde Ir" se añadan más items de forma horizontal, pero cuando lo intento se van listando hacia abajo en la parte desplegable. ¿Cómo podría hacerlo?

Éste es mi código:

* {
  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::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 -->

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-municipios {
  display: inline-block;
  border-radius: .2rem;
  background: #2c304038;
  position: relative;
  z-index: 2;
  margin-right: 30px;
} 


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

.subregion {
  margin-top: 40px;
}

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

.menu-municipios: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-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 {
  background-color: #2c3040;
  display: none;
  width: auto;
  margin: 0;
}

.menu-municipios>li:first-child {
  display: block;
  padding: .65rem;
  background: #2c3040;
  color: white;
  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(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-municipios">
    <li id>Donde Ir <i class="fas fa-angle-down"></i></li>
    <li>
      <h3>Obando</h3>
      <div class="subregion">
        <h4>Obando</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="#">Aldana</a></li>
          <li><a href="#">Contadero</a></li>
          <li><a href="#">Córdoba</a></li>
          <li><a href="#">Cuaspud</a></li>
          <li><a href="#">Cumbal</a></li>
          <li><a href="#">Funes</a></li>
          <li><a href="#">Guachucal</a></li>
          <li><a href="#">Gualmatan</a></li>
          <li><a href="#">Iles</a></li>
          <li><a href="#">Ipiales</a></li>
          <li><a href="#">Potosí</a></li>
          <li><a href="#">Puerres</a></li>
          <li><a href="#">Pupiales</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Río Mayo</h3>
      <div class="subregion">
        <h4>Río Mayo</h4>
        <ul>
          <li id="rioMayo" style="float:right"><img src="http://1.bp.blogspot.com/_dM3DF_UfkD0/SiiJMG8GsUI/AAAAAAAAAIE/86_usiW4WyA/s400/Mapa_Politico_Mudo_America.gif" alt="Mapa Nariño"></li>
          <li><a href="#">Albán</a></li>
          <li><a href="#">Belén</a></li>
          <li><a href="#">Colón</a></li>
          <li><a href="#">El Tablón</a></li>
          <li><a href="#">La Cruz</a></li>
          <li><a href="#">San Bernardo</a></li>
          <li><a href="#">San Pablo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Centro</h3>
      <div class="subregion">
        <h4>Centro</h4>
        <ul>
          <li id="centro" style="float:right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Provincias_de_Ais%C3%A9n.svg/300px-Provincias_de_Ais%C3%A9n.svg.png" alt="Mapa Nariño"></li>
          <li><a href="#">Pasto</a></li>
          <li><a href="#">Chachagüi</a></li>
          <li><a href="#">La Florida</a></li>
          <li><a href="#">Nariño</a></li>
          <li><a href="#">Tangua</a></li>
          <li><a href="#">Yacuanquer</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>La Sabana</h3>
      <div class="subregion">
        <h4>La Sabana</h4>
        <ul>
          <li id="sabana" style="float:right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzB1Eu83lXqkcvCzVajCik0Y9sqcnRWGrQScuTJUNlPuUlG88m" alt="Mapa Nariño"></li>
          <li><a href="#">Guatarilla</a></li>
          <li><a href="#">Imúes</a></li>
          <li><a href="#">Ospina</a></li>
          <li><a href="#">Sapuyes</a></li>
          <li><a href="#">Tuquerres</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Sanquianga</h3>
      <div class="subregion">
        <h4>Sanquianga</h4>
        <ul>
          <li id="sanguianga" style="float:right"><img src="https://cloud.educaplay.com/recursos/44/1411011/imagen_1.png" alt="Mapa Nariño"></li>
          <li><a href="#">El Charco</a></li>
          <li><a href="#">La Tola</a></li>
          <li><a href="#">Mosquera</a></li>
          <li><a href="#">Holaya Herrera</a></li>
          <li><a href="#">Santa Barvara</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Juanambú</h3>
      <div class="subregion">
        <h4>Juanambú</h4>
        <ul>
          <li id="juanambu" style="float:right"><img src="https://i.pinimg.com/originals/8e/32/a8/8e32a86195850d0338fa7f0f08bee08d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Arboleda</a></li>
          <li><a href="#">Buesaco</a></li>
          <li><a href="#">La Unión</a></li>
          <li><a href="#">San Pedro de Cartago</a></li>
          <li><a href="#">San Lorenzo</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Cordillera</h3>
      <div class="subregion">
        <h4>Cordillera</h4>
        <ul>
          <li id="cordillera" style="float:right"><img src="https://ugc.kn3.net/i/origin/http://us.123rf.com/400wm/400/400/maxxyustas/maxxyustas1102/maxxyustas110200125/8919988-mapa-de-argentina-en-los-colores-de-la-bandera-argentina-3d.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Cumbitara</a></li>
          <li><a href="#">El Rosario</a></li>
          <li><a href="#">Leiva</a></li>
          <li><a href="#">Policarpa</a></li>
          <li><a href="#">Taminango</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Occidente</h3>
      <div class="subregion">
        <h4>Occidente</h4>
        <ul>
          <li id="occidente" style="float:right"><img src="http://alo.co/sites/default/files/dynimagecache/291-0-548-731-300-400/mapa_4.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Ancuya</a></li>
          <li><a href="#">Consacá</a></li>
          <li><a href="#">Linares</a></li>
          <li><a href="#">Sandoná</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Guambuyaco</h3>
      <div class="subregion">
        <h4>Guambuyaco</h4>
        <ul>
          <li id="guambuyaco" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">El Peñol</a></li>
          <li><a href="#">El Tambo</a></li>
          <li><a href="#">La llanada</a></li>
          <li><a href="#">Los Andes Sotomayor</a></li>
          <li>
            <a href="#"></a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pacifico Sur</h3>
      <div class="subregion">
        <h4>Pacifico Sur</h4>
        <ul>
          <li id="pacificoSur" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Franciscoa</a></li>
          <li><a href="#">Pizarro</a></li>
          <li><a href="#">Tumaco</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Los abades</h3>
      <div class="subregion">
        <h4>Los abades</h4>
        <ul>
          <li id="losAbades" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Providencia</a></li>
          <li><a href="#">Samaniego</a></li>
          <li><a href="#">Santa Cruz</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Telembí</h3>
      <div class="subregion">
        <h4>Telembí</h4>
        <ul>
          <li id="Telembi" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Barbacoas</a></li>
          <li><a href="#">Magüí Payan</a></li>
          <li><a href="#">Roberto Payán</a></li>
        </ul>
      </div>
    </li>
    <li>
      <h3>Pie de Monte Costero</h3>
      <div class="subregion">
        <h4>Pie de Monte Costero</h4>
        <ul>
          <li id="PieMonteCostero" style="float:right"><img src="https://es-static.z-dn.net/files/dcc/c91ce8b034207ce60fcf1b4f6d73ce73.jpg" alt="Mapa Nariño"></li>
          <li><a href="#">Mallama</a></li>
          <li><a href="#">Ricaurte</a></li>
        </ul>
      </div>
    </li>


  </ul>

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

  <ul class="menu-municipios">
    <li id>Menu3</li>
  </ul>
  <ul class="menu-municipios">
    <li id>Menu4</li>
  </ul>
  <ul class="menu-municipios">
    <li id>Menu5</li>
  </ul>
</nav>
se añadieron 378 caracteres en el cuerpo
Origen Enlace
* {
  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::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="#">arquitectura<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><<h3>submenu3</h3>
      <div>
        <h4>B<<h4>submenú 3</h4>
      </div>
    </li>
    <li>
      <h3>S<<h3>submenu4</h3>
      <div>
        <h4>S<<h4>submenu4</h4>
      </div>
    </li>
    <li>
      <h3>H<<h3>submenu5</h3>
      <div>
        <h4>C<<h4>submenu5</h4>
      </div>
    </li>
    <li>
      <h3>G<<h3>submenu6</h3>
      <div>
        <h4>Ga<<h4>submenu6</h4>
      </div>
    </li>
    <li>
      <h3>G<<h3>submenu7</h3>
      <div>
        <h4>G<<h4>submenu7</h4>
      </div>
    </li>
    <li>
      <h3>S<<h3>submenu8</h3>
      <div>
        <h4>S<<h4>submenu8</h4>
      </div>
    </li> 

  </ul>

  <ul class="menu-municipios">
    <li id>menu 2 <i class="fas fa-angle-down"></i></li>
  </nav>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 -->
* {
  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::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="#">arquitectura</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></h3>
      <div>
        <h4>B</h4>
      </div>
    </li>
    <li>
      <h3>S</h3>
      <div>
        <h4>S</h4>
      </div>
    </li>
    <li>
      <h3>H</h3>
      <div>
        <h4>C</h4>
      </div>
    </li>
    <li>
      <h3>G</h3>
      <div>
        <h4>Ga</h4>
      </div>
    </li>
    <li>
      <h3>G</h3>
      <div>
        <h4>G</h4>
      </div>
    </li>
    <li>
      <h3>S</h3>
      <div>
        <h4>S</h4>
      </div>
    </li>
  </ul>
</nav>
* {
  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::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 -->
formato de código y texto
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
Loading
Origen Enlace
Loading