html - Bootstrap 下拉列表位于导航栏下方

Question

这是出现下拉菜单时的样子。

导航栏:

     <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

Why the given z-index doesn't work?

.dropdown-menu 与.navbar 不在同一层所以给z-index:1010; 和位置:relative; 到 #header(它的父级)。

Jsfiddle