Question

How do I make the menu drop shadow appear in front of a div background image?

Here’s my 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

Try adding a z-index:9; to your nav section.

This will bring the nav section to the top layer.