在手风琴顶部的bootstrap V3.0.3中显示下拉菜单

Question

我有Accordion，我在其中创建了一个下拉菜单。

下拉列表显示在最后一项的Accordion下。

这是下拉代码：

<div class="dropdown ">
<a id="dLabel" role="button" data-toggle="dropdown"
   data-target="#">
    <span class="glyphicon glyphicon-download-alt"></span>
</a>
<ul class="dropdown-menu download-dropdown pull-left" role="menu">
    <li role="presentation">
        <a href="#">Original data</a>
    </li>
    <li role="presentation">
        <a href="#">Original data</a>
    </li>

</ul>

如何让它出现在手风琴的顶部？

提前感谢。

https://jsfiddle.net/p0cxsfbx/1/

Answer 1

使z-index值更高。

.dropdown-menu {
  z-index: 50;
}

<强>更新

让您的小组overflow visible。

.panel .panel-default {
 overflow:visible;
}

确保在面板上添加另一个自定义类，否则此CSS将影响此CSS所在的任何页面上的任何面板。

Answer 2

在我们的评论讨论后，我了解到当屏幕尺寸在小型设备中时出现问题@media (max-width:992px){}

所以尝试将此添加到您的css：

 @media (max-width:992px){
.dropdown-menu{width:100% !important;right:0!important;}
}

Answer 3

您是否尝试过使用＆＃34; dropup＆＃34;而不是＆＃34;下拉＆＃34;包含菜单的div中的类？

请检查以下代码，希望它有所帮助。

＆＃13;

＆＃13;

<div class="dropup">   // <<<<changed here
<a id="dLabel" role="button" data-toggle="dropdown"
   data-target="#">
<span class="glyphicon glyphicon-download-alt"></span>
		</a>
<ul class="dropdown-menu download-dropdown pull-right" role="menu">
		<li role="presentation">
	<a href="#">Original data</a>
					</li>
			<li role="presentation">
	<a href="#">Original data</a>
		</li>
		</ul>
	</div>

＆＃13;

＆＃13;

＆＃13;