在引导导航栏中，下拉菜单溢出不起作用答案

【问题标题】：Dropdown menu overflow not working when inside a bootstrap nav bar在引导导航栏中，下拉菜单溢出不起作用
【发布时间】：2013-10-17 16:08:36
【问题描述】：

我有这个很好用的下拉菜单：

<div class="btn-group pull-left">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-map-marker icon-large"></i> Change Site
        <span class="caret"></span>
    </a>
    &nbsp;
    <ul class="dropdown-menu" id="arSiteList">
        <li>
            <a href='#'><b>Select a site</b></a>
        </li>
        <li class="divider"></li>
    </ul>
</div>

当下拉项目列表比屏幕长时，滚动鼠标滚轮将向下滚动项目列表。这是完美的。

但是，当我将下拉菜单移到导航栏中时，它停止工作：

<div class="navbar navbar-fixed-top" >
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="http://portal.parworksapi.com/ar/mars/portal/developer">PAR Works</a>
            <div class="btn-group pull-left">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-map-marker icon-large" ></i> My Sites <span class="caret"></span>
            </a> &nbsp;
            <ul class="dropdown-menu" id="arSiteList" style="overflow: scroll;">
                <li><a href='#'><b>Select a site</b></a></li>
                <li class="divider"></li>
            </ul>
        </div>
    </div>
</div>

下拉菜单仍然打开，但是当项目列表太长时，无法滚动它们。

如何在导航栏内进行滚动？

【问题讨论】：

一定要制作一个 Jsfiddle 或其他东西来证明问题。如果我们只能看到 HTML，不要认为这是可以解决的。下拉菜单是使用 CSS 还是 javascript？

标签： javascript jquery twitter-bootstrap drop-down-menu

【解决方案1】：

在现有的“溢出：隐藏；”上检查菜单的所有父元素CSS中的属性

【讨论】：