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; 和 position:relative; 给 #header（其父级）。

Jsfiddle

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

Bootstrap drop down list goes under the nav bar

html

css

navbar

drop-down-menu

twitter-bootstrap-3