CSS：2个元素的干扰，不适用于z-index？

Question

在我的标题中，我有一个下拉菜单（绿色），干扰了一个粘性标题（紫色）。 粘滞标题位于下拉菜单上方，因此当我尝试将鼠标悬停在下拉菜单的不同元素上时，当它粘贴在标题上时我会丢失它。

所以对我来说这是一个明显的z-index问题需要用CSS解决，所以我试过了：

#regularMenu .hasDrop ul.site-nav__dropdown {
    z-index: 9999 !important;
}
#prodForm.prod_form.prod_form_footer.sticky_addcart {
    z-index: 1000 !important;
}

但由于某种原因它不起作用

我还在下拉菜单中尝试了这些其他选择器，但没有成功：

#regularMenu .hasDrop ul
.hasDrop ul

如果您想自己测试一下，这是我遇到问题的网址产品页面之一： https://www.tresor-ethnique.com/products/collier-yin-et-yang

任何想法都会非常感激，提前非常感谢:) 帕斯卡

Answer 1

试试这个。

这是你现在的css

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

只需将z-index值更改为9999;

header {
    z-index: 9999;
}