CSS: interference of 2 elements, doesn't work with z-index? - css

Question

in my header I have a dropdown menu (green) that interferes with a sticky header (purple).
Sticky header is above the dropdown menu, so when I try to hover the different element of the dropdown menu, I lose it when it goes on the sticky header.
So for me this was an obvious z-index issue to be resolved with CSS, so I've tried:
#regularMenu .hasDrop ul.site-nav__dropdown {
z-index: 9999 !important;
}
#prodForm.prod_form.prod_form_footer.sticky_addcart {
z-index: 1000 !important;
}
But it doesn't work for some reason
I've also tried these other selectors for the dropdown menu, without success:
#regularMenu .hasDrop ul
.hasDrop ul
If you want to test it by yourself, this is one of the URL product pages where I encounter my issue:
https://www.tresor-ethnique.com/products/collier-yin-et-yang
Any idea would be greatly appreciated, a huge thanks in advance :)
Pascal

Answer 1

try this.
This is your css now
header {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
width: 100%;
border-bottom: 1px solid transparent;
position: relative;
z-index: 999;
}
just change the z-index value to 9999;
header {
z-index: 9999;
}