How do I take dropdown content to the front using z-index? - html

Question

A dropdown div element which is supposed to work like this in mobile view is appearing like this mobile view In inspect Element.
I tried to change CSS z-index stylings of almost all related nav elements and left this one at "z-index:121212 !important;" and still the dropdown div is appearing behind all the other nav links.
Does anyone know why this is happening? Any help would be greatly appreciated.
Here is my HTML code and it's CSS:
.navbar-mobile .dropdown>.dropdown-active {
display: block;
z-index: 121212;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--bg-dark);
min-width: 200px;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
z-index: 101000;
animation: marketNav 0.5s;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover{
background-color: var(--main-color);
color: #000 !important;
}
.dropdown-content a:hover{
color: #1F586B;
}
.dropdown:hover .dropdown-content{
display: inline-block;
}
.nav-pills.has-two .nav-item .nav-link.active {
background-color: var(--main-color);
color: #000;
}
.nav-link{
font-weight: 600 !important;
letter-spacing: 0.8px;
}
#media screen and (min-width: 1024px) {
.support-link{
margin-right: 10px!important;
}
.nav-link{
padding-left: 25px!important;
}
}
.nav-pills.has-two .nav-item .nav-link {
background-color: #000 !important;
color: #fff;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
padding: 12px 20px;
}
<!-- Navigation -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-lg-between">
<div class="logo me-auto me-lg-0">
<a href="index.htm">
<span>
<img class="img-fluid rounded sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
</span>
</a>
</div>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li class="active">
<a class="nav-link" href="index.htm">Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Market</a>
<div class="dropdown-content">
Forex
Cryptocurrencies
Indices
Stocks
Commodities
</div>
</div>
<div class="mobile-view marketNav">
Forex
Cryptocurrencies
Indices
Stocks
Commodities
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Trading</a>
<div class="dropdown-content">
Trading Platforms
Tools
Education
benefits
</div>
</div>
<div class="mobile-view marketNav">
<a class="sub-nav-link" href="">Trading Platforms</a>
<a class="sub-nav-link" href="">Tools</a>
<a class="sub-nav-link" href="">Education</a>
<a class="sub-nav-link" href="">benefits</a>
</div>
</li>
<li>
<a class="nav-link" href="">Account Types</a>
</li>
<li>
<a class="nav-link" href="">About</a>
</li>
<li>
<a class="nav-link" href="">Contact</a>
</li>
<li class="d-md-block d-lg-none d-block ">
<a class="nav-link" href="">Login</a>
<a class="btn-border-inverse col-12 btn-sm me-3" href="">Register</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="header-right d-flex d-none d-md-none d-lg-block">
Login
Register
</div>
</div>
</header>
<!-- Navigation Ends -->
Edit: I found a way to solve this issue. The links weren't able to be clicked when they are behind the main "nav-links". So I added blank divs with heights to appear below the nav-link where the dropdown-content would appear with the help of some JS and CSS to make it hidden in larger screens. Now I am able to click the links in the "dropdown-content".

Answer 1

The problem is not with the z-index, but with the background-color. It is transparent, so it seems like it's behind the other text. You should set the variables you use in your code:
:root {
--bg-dark: #000;
--main-color: #fff;
}