Z-Index/Drop-down menu issues

[sonnystupid]

so i'm not sure what the issue is, but for some reason the z-index isn't fixing the visibility issues on the navbar and i don't know what else to try...this is what i've got going! and image of the issues

.dropdown .dropbtn {
        color:#dfc79d;
  
}

.dropdown-content a {
     color:#000;
     position: sticky;
     z-index: 9999;
     display: block;
  
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #b67942;
  z-index: 9999;
 
}
.navbar {
    background: #01c7fc url(images/menu/menugradient.png) repeat-x;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 102px;
}

you can see the white line is the drop-down menu and it's not overlapping over the header or anything else. id also like to know how to get rid of the original home of it, the brown bar

 

[BigDady]

Guess I didn't hit SAVE this morning.
This looks like it may be caused because both the .dropdown-content a and .navbar a:hover, .dropdown:hover .dropbtn has z-index set to the same value. Try setting one lower - then set the other lower.

But here is why no one has answered you all day. CSS without what it is styling (the HTML code) is worthless.
Please post that part of the equation using the </> icon located to the right and above.
Next url(images/menu/menugradient.png) is on your computer. Can you link to where you got this image?

 

[VBService]

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

it means ...

.navbar a:hover, .dropdown:hover .dropbtn {
  position: relative; /* absolute, fixed, etc. */
  background-color: #b67942;
  z-index: 9999;
}