A dropdown div element that should work like this in mobile view, but appears as mobile view in the inspect element.

I've tried changing the CSS z-index styling of almost all related navigation elements to keep this element at "z-index:121212 !important;", but the dropdown div still appears behind all other navigation links.

Does anyone know why this is happening? Any help would be greatly appreciated.

This is my HTML code and its 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; }

 
 
 
      
  
 Login Register 
 
 
 

编辑：我找到了解决这个问题的方法。当链接位于主要的“nav-links”后面时，它们无法被点击。所以我添加了一些高度的空白div，以出现在下拉式内容将出现的nav-link下方，借助一些JS和CSS使其在较大的屏幕上隐藏。现在我可以点击“dropdown-content”中的链接了。