Tengo un problema con la posición de "menu2","menu3","menu4","menu5"; cuando despliego el submenu del "menu1 el resto se corre hacia la derecha, quisiera uqe conserven su posición cada vez que se despliega el menú... Agradezco mucho su ayuda.
Código HTML :
<html lang="es-CO"> <head> <meta charset="UTF-8"> <title>Menu</title> <i class="fas fa-angle-down"></i> <link rel="stylesheet" href="css/menu.css"> </head> <body> <nav> <ul class="menu"> <li id>menu1 <i class="fas fa-angle-down"></i></li> <li> <h3>1</h3> <div class="subregion"> <h4>1</h4> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">C</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> </ul> </div> </li> </ul> <ul class="menu"> <li id>Menu2</li> </ul> <ul class="menus"> <li id>Menu3</li> </ul> <ul class="menu"> <li id>Menu4</li> </ul> <ul class="menu"> <li id>Menu5</li> </ul> </nav> </body>
Código CSS :
@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 {
display: inline-block;
border-radius: .2rem;
background:#2c304038;
position: relative;
z-index: 2;
margin-right: 30px;
}
/* .menu:hover {
position: absolute;
} */
.subregion{
margin-top: 40px;
}
.menu:hover>li {
display: block;
}
.menu: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:hover>li:first-child::after {
content: '\f106';
} */
.menu:hover>li:last-child {
border-radius: 0 0 .2rem .2rem;
}
.menu:hover+.temp::after {
display: block;
}
.menu>li {
background-color: #2c3040;
display: none;
width: auto;
margin: 0;
}
.menu>li:first-child {
display: block;
padding: .65rem;
background: #2c3040;
color: white;
font-size: .875rem;
cursor: pointer;
}
/* .menu>li:first-child::after {
content: '\f107';
float: right;
} */
.menu>li:not(:first-child):hover {
width: calc(960px - 6rem);
border-right: none;
}
.menu>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%;
}
}
