css - 下拉菜单项上的 Z-index
问题描述
ETA：我被请来帮助这个网站的一点点。我不是设计师，所以我必须请求许可才能共享该站点并设置一个临时站点。我现在可以提供链接....
https://staging3.childsfirststeps.com/
我已经剥离了我一直在使用的所有 z-index/overflow 实例，因此它是一个相对干净的状态。
简而言之，我需要主页滑块框架来重叠导航项目，如下图所示。在其他页面上，我需要页眉（标题栏）来重叠导航项目。所有这一切，同时保留下拉菜单。
一位客户要求（尽管我们反对）根据她在某处找到的静态设计（图像）进行此导航设计。我认为这在技术上是可行的，所以我开始重新创建它。我设法弄明白了，但在添加下拉菜单项时遇到了障碍：下拉菜单项上的 z-index 不正常。
我已经定位了所有相关项目并按照我的预期堆叠了 z-index。除了当前位于页眉后面的 dropdpown 菜单项之外，一切都正常工作。
菜单项全部转换（旋转）并在悬停时翻译。页眉（标题栏）需要堆叠得高于导航，以覆盖旋转菜单项的底部。
HTML 当然相当复杂，因为网站设计者使用的是 WordPress 和 Elementor，因此无法移动容器。
我已经尝试了所有我能想到的 z-index 和溢出设置。
这种设计可以通过下拉菜单项实现吗？
