Advertisements
I want to make a dropdown without using select but the problem is the drop goes behind other tags
and i dont know what to do
dropdown is here
<div class="dropdown">
<div><button class="dropdown_btn">Category</button></div>
<div class="drop">
<a href="#" class="a_none_d">All cate</a>
<a href="#" class="a_none_d">cate 1</a>
<a href="#" class="a_none_d">cate 2</a>
<a href="#" class="a_none_d">cate 3</a>
</div>
and the css:
.dropdown{
display: inline-block;
position: relative;
margin-left: 10px;
transition: all 0.3s;
}
.drop{
align-items:center;
border-radius: 10px;
display: none;
position: fixed;
width: 65px;
overflow: none;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.drop a:hover{
color: #FFFFFF;
background-color: red;
}
.dropdown:hover .drop{
display: block;
}
the full code is here :
>Solution :
To ensure that your dropdown appears on top of other elements and does not get hidden behind them, you can increase the z-index property of the dropdown container. The z-index property controls the stacking order of positioned elements.
Here is your current HTML Code:
<div class="dropdown">
<div><button class="dropdown_btn">Category</button></div>
<div class="drop">
<a href="#" class="a_none_d">All cate</a>
<a href="#" class="a_none_d">cate 1</a>
<a href="#" class="a_none_d">cate 2</a>
<a href="#" class="a_none_d">cate 3</a>
</div>
</div>
Here is your updated CSS Code:
.dropdown {
display: inline-block;
position: relative;
margin-left: 10px;
transition: all 0.3s;
z-index: 1; /* Add this line to set the z-index */
}
.drop {
align-items:center;
border-radius: 10px;
display: none;
position: absolute; /* Change this to 'absolute' */
top: 100%; /* Add this line to position the dropdown below the button */
width: 65px;
overflow: none;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2; /* Add this line to set the z-index */
}
.drop a:hover{
color: #FFFFFF;
background-color: red;
}
.dropdown:hover .drop{
display: block;
}