Выпадающий список Bootstrap попадает под панель навигации

Question

Вот как это выглядит, когда появляется раскрывающееся меню.

Nav-бар:

 <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> 
... 

Выпадающее:

<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> 
            .... 

Пробовал с позиционированием (position:relative) .Но не может получить требуемый результат. (Выпадающий над nav-bar). Спасибо заранее.

Вот пример my work.

Answer 1

Почему данный z-index не работает?

.dropdown-menu не в том же самом уровне .navbar поэтому дать z-index:1010; и position:relative; к #header (его родителя).

Jsfiddle