內容覆蓋的插圖影子

Question

我正在創建一個滑出菜單。我需要一個陰影來將原始內容從菜單中分離出來，這不是問題 - 這是使用嵌入框陰影完成的。不過，我還需要設置一些內容的背景。高亮顯示的區域是陰影應該出現的區域，但是在該區域內，我有一個由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; 
} 

Answer 1

我添加了一個新的陰影股利和使用下面的代碼放置在頂部：

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

Answer 2

你需要給你的側邊欄比你li元素更大z-index。理想情況下，您的側邊欄應該比您網頁上的所有其他內容大z-index。

z-index CSS屬性指定元素及其後代的z順序。當元素重疊時，z順序決定哪一個覆蓋另一個。大於z-index的元素通常覆蓋較低元素。

ul { 
    position: relative; 
    z-index: 1; 
} 

div.sidebar { 
    position: relative; 
    z-index: 2; 
}