How can I ensure that the drop shadow of the menu appears in front of a background image within a div?
See below for my CSS code
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>