我有一个带阴影效果的标题栏，其中包含导航链接；当您将鼠标悬停在它们上方时，会出现一个子菜单。
如何让子菜单出现在标题条后面的层上？我需要将页眉的框阴影转换到子菜单的顶部。
当前子菜单(.main-navigation li ul)的 z-index 低于标题条(.site-header)，但这是有没有效果。我试过给它一个负 z-index 但这把它放在内容后面(因此隐藏)并且链接不再有效 - 我读过这是一个常见问题所以我想避免使用负 z-索引。
希望你能帮到你。
最佳答案
Z-index 在这种情况下可能不是解决方案，因为 stacking context的元素。在不重新排序 html 的情况下，您可以在附加到子菜单的伪元素上使用 box-shadow 来尝试这个技巧。例如:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
检查这个DEMO .请注意，这只是一种可能的解决方案，因为可能还有其他方法可以达到相同的效果。
文本内容应该已经自然地出现在标题的阴影后面，因为它是一个相邻的兄弟元素，在 html 中排在标题之后。 (我在演示中的内容 div 中添加了背景图片以显示这一点。)
关于drop-down-menu - 使 UL 子菜单出现在其具有阴影效果的包含框后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18903437/