dropdown goes behind other tags

August 3, 2023

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;
}