Drop down menu 使UL子菜单显示在具有阴影效果的包含框后面

我有一个带有阴影效果的标题条，包含导航链接；将鼠标悬停在它们上方时，将显示一个子菜单

如何使子菜单显示在标题条后面的图层上？我需要标题框阴影投射到子菜单的顶部

目前，子菜单（

.main navigation li ul

）的z索引低于标题条（

.site header

），但这没有效果。我试着给它一个负z索引，但这会使它隐藏在内容后面（因此隐藏），链接不再工作-我读到这是一个常见的问题，所以我想避免使用负z索引

---

希望您能提供帮助。

Z-index可能不是这种情况下的解决方案，因为元素太多。在不重新排序html的情况下，您可以在附加到子菜单的伪元素上使用框阴影来尝试此技巧。例如：

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

看看这个。请注意，这只是一种可能的解决方案，因为可能还有其他方法来实现相同的效果

---

文本内容应该已经自然地出现在标题的阴影后面，因为它是相邻的同级元素，在html中排序在标题之后。（为了展示这一点，我在演示的content div中添加了一个背景图像。）

非常感谢，回答得非常好！一个问题-对于伪元素，我注意到当我将宽度更改为100%时，阴影不是ul子菜单的全宽。。。伪元素从何处获取/继承其宽度？是的，宽度（宽度：160%）是任意的。它可以是任何适合您的宽度，将其延伸到子菜单的两侧，因为子菜单隐藏溢出。如果出于某种原因需要100%的宽度，则必须在子菜单中调整元素的边距或样式，因为它们也会影响伪元素。伪元素似乎从内容框区域（即填充区域内）获取宽度。这解释了为什么必须将其设置为100%以上，才能使其扩展到整个子菜单。