Question

我在网站上有这个导航。这包含一个两级下拉菜单。工作得很好！

<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active"><a href="http://example.com">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" tabindex="-1" data-delay="200" data-close-others="true" href="#">Category<b class="caret"></b></a>
<ul class="dropdown-menu" data-container=".white body" aria-labelledby="dLabel" role="menu" style="z-index: 999999999 !important; display: block; position: absolute;">      
<li class="dropdown-submenu">
<a class="dropdown-toggle submenu-toggle" data-id="1" tabindex="-1" href="http://ec2-54-254-210-87.ap-southeast-1.compute.amazonaws.com/category/mobile-phone/1">Mobile Phone&nbsp; <span class="badge badge-info">518</span>   
</a>   
<li class="dropdown-submenu">
<a class="dropdown-toggle submenu-toggle" data-id="28" tabindex="-1" href="http://example.com/motorcycle/28">Motorcycle&nbsp;   <span class="badge badge-info">100</span>   
</a>           
<ul class="dropdown-menu submenu-menu" style="display: none; position: absolute;">
<li><a tabindex="-1" href="http://example.com/walton">Walton</a></li> 
</ul>               
</li> 
</ul> 
</li>
</ul>    
</div>

但是当主下拉列表变长（高度增加）时，大多数菜单都隐藏在主容器div中，后面跟着包含导航栏的网站标题。

我到目前为止尝试过：

在标签内联设置z-index并使其成为！important。
试图将z的索引设置为-1 下拉列表获得的堆栈功率高于主容器。

但没有任何效果！

Bootstrap下拉菜单隐藏在容器后面

0 个答案: