将菜单栏的阴影带到背景图像的前面

Question

如何使菜单阴影出现在div背景图像的前面？

这里是我的CSS

nav { 
    width:900px; 
    margin: 4px auto 0px 8%; 
    font-size: 16pt; 
    padding-bottom: 0px; 

    -moz-box-shadow: 7px 8px 3px 1px black; 
    -webkit-box-shadow: 7px 8px 3px 1px black; 
    box-shadow:   7px 8px 3px 1px black; 
} 

.mainContent { 
    margin: 0px auto; 
    width: 1200px; 
    height:100%; 
    padding-top:0px; 

    background-color: #0e23a4; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0e23a4), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #0e23a4, #999999); 
    background-image: -moz-linear-gradient(top, #0e23a4, #999999); 
    background-image: -o-linear-gradient(top, #0e23a4, #999999); 
    background-image: linear-gradient(to bottom, #0e23a4, #999999); 

    -webkit-box-shadow: 0px 15px 9px 8px black; 
    box-shadow: 0px 15px 9px 8px black; 

} 

.bodyMain { 
    width: 100%; 
    height:100%; 

    border:1px solid white; 
    background-image:url("/Content/images/phoenix.jpg"); 
} 

HTML

<nav> 
     <ul id="menu1"> 
      ... 
     </ul> 
    </nav> 
    <div class="bodyMain"> 
     <div class="mainContent"> 
      ... 
     </div> 
    </div> 

Answer 1

尝试添加z-index:9;到您的导航部分。

这将使nav部分到顶层。