Bootstrap drop down list goes under the nav bar

Question

Here is how it looks like when the drop-down menu appears.

Nav-bar :

     <nav class="navbar navbar-default" role="navigation">

                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Categories</a>
...

Drop-down:

<ul class="dropdown-menu">

            <li>
               <div class="panel panel-default">
                 <div class="panel-body">
                  <div class="panel-info">
                    <p><strong>Black Dress</strong></p>
                      <p>Each Price :&nbsp;<strong>Rs. 500.00</strong></p>
                      <p>Quantity :&nbsp; <input type="number" value="3"/> 
                    <a href="#"><span class="glyphicon glyphicon-refresh"></span></p>
                                   ....

Tried with positioning(position:relative).But couldn't get the required result. (Drop-down over the nav-bar) .Thanks in advance.

Here is an example of my work.

Answer 1

Why the given z-index doesn't work?

.dropdown-menu is not in the same level of .navbar so give z-index:1010; and position:relative; to the #header(its parent).

Jsfiddle