Css 内容覆盖的插入阴影

我正在创建一个幻灯片菜单。我需要一个阴影来将原始内容从菜单中分离出来，这不是一个问题-这是使用一个插入框阴影来完成的。不过，我还需要为一些内容设置背景。突出显示的黄色区域是阴影应该出现的区域，但是，在该区域内，我有一个由UL/LI构成的菜单，LI需要有不同的背景颜色（突出显示的红色）

当LI被赋予背景色时，阴影被覆盖

我一直在寻找解决办法，但还没有找到任何办法。有没有CSS大师提出了解决方案

代码如下：

<nav id="mobile-nav">
    <ul>
        <li><h3>My Stuff</h3></li>
        <li><a>Nav item 1</a></li>
        <li><a>Nav item 2</a></li>
        <li><a>Nav item 3</a></li>
        <li><h3>Help & Info</h3></li>
        <li><a>Nav item 4</a></li>
        <li><a>Nav item 5</a></li>
        <li><a>Nav item 6</a></li>
    </ul>
</nav>

#mobile-nav
{
    .InnerShadow(-1.5em, 0, 1.5em, -0.75em);
    background-color:@navy;
    height:100%;
    left:-22.4rem;
    position:absolute;
    top:0;
    width: 22.4rem;
    z-index: 2;
}

#mobile-nav ul
{
    position: relative;
    z-index: 1;
}

#mobile-nav li
{
    border-bottom:solid 0.1rem @navy1;
}

#mobile-nav li:first-child
{
    border-top:0;
}

#mobile-nav li > *
{
    color:#FFF;
    line-height:3.6rem;
    height:3.6rem;
    padding:0 1rem;
}

#mobile-nav li h3
{
    background-color:@fern;
    border-top:solid 0.1rem @fernL1;
}

#mobile-nav li a
{
    border-top:solid 0.1rem @navy-1;
    display:block;
    padding-left:2rem;
}

我的东西
导航项目1
导航项目2
导航项目3
帮助和信息
导航项目4
导航项目5
导航项目6

#移动导航
{
.InnerShadow（-1.5em，0，1.5em，-0.75em）；
背景颜色：@海军；
身高：100%；
左：-22.4rem；
位置：绝对位置；
排名：0；
宽度：22.4rem；
z指数：2；
}
#移动导航
{
位置：相对位置；
z指数：1；
}
#移动导航李
{
边框底部：实心0.1rem@navy1；
}
#移动导航李：第一个孩子
{
边界顶部：0；
}
#移动导航li>*
{
颜色：#FFF；
线高：3.6雷姆；
身高：3.6雷姆；
填充：0 1rem；
}
#移动导航li h3
{
背景颜色：@fern；
边框顶部：实心0.1rem@fernL1；
}
#移动导航李a
{
边框顶部：实心0.1rem@navy-1；
显示：块；
左：2rem；
}

您需要为侧边栏指定一个大于

li

元素的值。理想情况下，您的侧边栏应该比页面上的所有其他内容具有更大的

z-index

z-index

CSS属性指定元素及其子体的z顺序。当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z索引的元素通常包括具有较低索引的元素

ul{
位置：相对位置；
z指数：1；
}
分区侧栏{
位置：相对位置；
z指数：2；
}

我添加了一个新的shadow div，并使用以下代码将其置于顶部：

#mobile-nav .shadow
{
    .InnerShadow(-1.5rem, 0, 1.5rem, -1.5rem, 0.4);
    background-color:Transparent;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

---

你可以添加一个提琴或代码段吗？你应该把侧边栏的z索引调高一点。@dippas代码贴出了James Donnelly的更改。仍然不起作用。添加了代码James，但是H3颜色的“蕨类植物”仍然在顶部。@dotnetnoob也将较低的

z-index

添加到

H3

元素中。