Html 带菜单栏';背景图像前面的阴影

Html 带菜单栏';背景图像前面的阴影,html,css,xhtml,Html,Css,Xhtml,如何使菜单下拉阴影显示在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

如何使菜单下拉阴影显示在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


    ...
...
尝试添加一个
z-index:9到您的导航部分


这将把
nav
部分带到顶层。

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


这将把
nav
部分带到顶层。

我还需要添加位置:relative;但这起作用了。谢谢我还需要添加位置:相对;但这起作用了。谢谢
    <nav>
        <ul id="menu1">
            ...
        </ul>
    </nav>
    <div class="bodyMain">
        <div class="mainContent">
            ...
        </div>
    </div>