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>