javascript - Bootstrap下拉菜单被第二个面板主体隐藏

我在一个面板主体中有一个下拉菜单，而另一个面板主体下面有内容。单击下拉菜单时，它隐藏在第二个面板主体下。我尝试了各种z-index和overflow：visible / auto等，但没有任何乐趣。

此处的示例：https://jsfiddle.net/084wukwz/1/

的HTML：

<div class="row">
    <div class="col-lg-12">
        <div class="hpanel">
            <div class="panel-body">
                <div class="panel-heading">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h3 class="box-title"><i class="fa fa-fw fa-info-circle"></i> Heading</h3></a>
                </div>
<p class="text-muted">Basic Info</p><br/>
            <div id="collapseOne" class="panel-collapse collapse">
            <p>Full Info</p>
            </div>
            </div>
            <div class="panel-footer">
        <a href="index.php?n1=personnel&n2=personnel_details&amp;n3=add_personnel"><button class="btn btn-success"><i class="fa fa-fw  fa-plus-circle"></i> button 1</button></a>&nbsp;
        <a href="index.php?n1=personnel&n2=personnel_details&amp;n3=add_user"><button class="btn btn-success"><i class="fa fa-fw  fa-plus-circle"></i> button 2</button></a>&nbsp;
        <a href="#"><button class="btn btn-info"><i class="fa fa-fw  fa-eye"></i>button 3</button></a>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
                        dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="z-index:inherit;overflow:visible;">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 2</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 3</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 4</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-body">
                   <h3 class="box-title">Content</h3>
                </div>
            </div>
       </div>
</div>

CSS：

.hpanel > .panel-heading {
  color: inherit;
  font-weight: 600;
  padding: 10px 4px;
  transition: all .3s;
  border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
  border-bottom: none;
}
.hpanel > .panel-footer {
  color: inherit;
  border: 1px solid #e4e5e7;
  border-top: none;
  font-size: 90%;
  background: #f7f9fa;
}
.hpanel.panel-collapse > .panel-heading,
.hpanel .hbuilt {
  background: #fff;
  border-color: #e4e5e7;
  border: 1px solid #e4e5e7;
  padding: 10px 10px;
  border-radius: 2px;
}
.hpanel .panel-body {
  background: #fff;
  border: 1px solid #e4e5e7;
  border-radius: 2px;
  padding: 20px;
  position: relative;
}
.panel-body .panel-heading{
  padding: 10px 0px;
}
.panel-collapse .panel-body {
  border: none;
}
.hpanel {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}

最佳答案

将position: absolute;用于下拉菜单（并删除其其他样式属性）。
overflow与该问题无关。如有疑问，请始终参阅CSS Reference。

Updated fiddle