Jumbotron covers the shadow of the div above it

Question

I am trying to use boostrap and have the following html:

<div class="drop-shadow">
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">link1</a></li>
                    <li><a href="#">link2</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container">
            <h1>Measure Where You Are.</h1>
        </div>
    </div>
    </div>

my style is as follows:

.drop-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 2);
 -webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 2);
}

What happens is when I add the jumbotron the shadow of the nav div is gone, jumbotron covers it. I can add margin-bottom to the div that drops shadow, which solves the problem. But the question is whether there is a better way to solve it?

Answer 1

Adding position:relative; and a z-index to the drop-shadow seems to work.

See this fiddle.