How to Dropdown Menu Overlay Div Content

Asked

Viewed 746 times

3

I am trying to make a Dropdown Menu, the problem is that I would like this menu to overlap the contents of the div. I have tried using the position: absolute, works, Entering the div of the dropdown Menu explodes out of the div to which it is contained.

document.querySelectorAll(".select").forEach((el)=> {
   el.addEventListener("click", function (e){
       this.classList.toggle("collapsed");
   });
}); 
#submenuUser{
height: calc(100% - 210px);
width: 200px;
float: left;
margin-right: 5px;
border: solid 1px green;
background-color: #515151;
}
#listStyle{
list-style: none;
border-top: solid 1px grey;
padding-left: 0;
margin: 0;
}
#listStyle2{
list-style: none;
padding-left: 0;
margin-top: 5px;
}
#listStyle li{
border-bottom: solid 1px gray;
}
#listStyle li:hover{
background: #555;
}
#listStyle li a{
color: white;
height: 50px;
text-decoration: none;
display: block;
}
.select{
width: 100%;
overflow: hidden;
margin: 0;
color: #ffffff;
position: relative;
height: auto;
max-height: calc(50px * 8); /* max 8 element in list */
transition: 0.2s;
}
.select:before {
content: '';
position: absolute;
background-color: #ffffff;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 15px;
right: 15px;
}
.select:after {
content: '';
position: absolute;
background-color: #4682B4;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 20px;
right: 15px;
}
.collapsed {
max-height: 50px;
transition: 0.2s;
}
.collapsed:before {
content: '';
position: absolute;
background-color: #ffffff;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 10px;
right: 15px;
}
.collapsed:after {
content: '';
position: absolute;
background-color: #4682B4;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 5px;
right: 15px;
}
.option, .shown {
width: 100%;
height: 50px;
line-height: 50px;
cursor: pointer;
background-color: #515151;
}
.shown {
background-color: #4682B4;
font-weight: 400;
}
<div id="submenuUser">
<div class="select collapsed">
    <li class="shown">Sub Menu</li>
	<li class="option">Teste1</li>
	<li class="option">Teste2</li>
	<li class="option">Teste3</li>
	<li class="option">Teste4</li>
</div>
<ul id="listStyle">
    <li><a href="#">Teste1</a></li>
    <li><a href="#">Teste2</a></li>
    <li><a href="#">Teste3</a></li>
    <li><a href="#">Teste4</a></li>
</ul>
</div>

How could I solve this problem ?

html css

  • Man as well, not to understand what you want... What was the behavior you expected? It seems to work normal... You have a layout image, or have how to explain better or edit the code with the problem you have there?

1 answer

3


You need to put position: relative in the main div so that the child element that has position: absolute is positioned inside relative to the parent element, otherwise it will be positioned relative to the body.

Since the Absolute element does not take up space in the div, you will need to use a padding-top in the second div to compensate and to move it away from the top of the father div, not to be under the submenu.

See below for lines in the CSS with comments /* AQUI */:

document.querySelectorAll(".select").forEach((el)=> {
   el.addEventListener("click", function (e){
       this.classList.toggle("collapsed");
   });
}); 
#submenuUser{
height: calc(100% - 210px);
width: 200px;
float: left;
margin-right: 5px;
border: solid 1px green;
background-color: #515151;
position: relative; /* AQUI */
}
#listStyle{
list-style: none;
border-top: solid 1px grey;
padding-left: 0;
margin: 0;
padding-top: 50px; /* AQUI */

}
#listStyle2{
list-style: none;
padding-left: 0;
margin-top: 5px;
}
#listStyle li{
border-bottom: solid 1px gray;
}
#listStyle li:hover{
background: #555;
}
#listStyle li a{
color: white;
height: 50px;
text-decoration: none;
display: block;
}
.select{
width: 100%;
overflow: hidden;
margin: 0;
color: #ffffff;
position: absolute;
height: auto;
max-height: calc(50px * 8); /* max 8 element in list */
transition: 0.2s;
}
.select:before {
content: '';
position: absolute;
background-color: #ffffff;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 15px;
right: 15px;
}
.select:after {
content: '';
position: absolute;
background-color: #4682B4;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 20px;
right: 15px;
}
.collapsed {
max-height: 50px;
transition: 0.2s;
}
.collapsed:before {
content: '';
position: absolute;
background-color: #ffffff;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 10px;
right: 15px;
}
.collapsed:after {
content: '';
position: absolute;
background-color: #4682B4;
cursor: pointer;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
top: 5px;
right: 15px;
}
.option, .shown {
width: 100%;
height: 50px;
line-height: 50px;
cursor: pointer;
background-color: #515151;
}
.shown {
background-color: #4682B4;
font-weight: 400;
}
<div id="submenuUser">
<div class="select collapsed">
    <li class="shown">Sub Menu</li>
	<li class="option">Teste1</li>
	<li class="option">Teste2</li>
	<li class="option">Teste3</li>
	<li class="option">Teste4</li>
</div>
<ul id="listStyle">
    <li><a href="#">Teste1</a></li>
    <li><a href="#">Teste2</a></li>
    <li><a href="#">Teste3</a></li>
    <li><a href="#">Teste4</a></li>
</ul>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.