如何为固定导航栏中的下拉菜单添加滚动条

Question

我在我的网站中使用导航栏（引导程序 3）作为主导航菜单，并且我有几个下拉菜单（其中一些填充了固定数据，一些数据来自数据库），我想要每个下拉菜单中都有一个 Y 滚动条，因此当用户单击 drondown 时，无需更改导航栏中的任何内容，它会显示有限的数据，并能够滚动查看其余部分

非常感谢所有想法。 这是我的代码：

  <nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse" >
        <ul class="nav navbar-nav">
            @if (Html.HasAssetContext())
            {
                <li><a href="@Url.Action("Index", Html.HasAssetContext() ? "Asset" : "Home")"><i class="icon-home"></i></a></li>
            }
            @if (Html.HasPermission(Category.SEARCH) && (Html.HasCompanyContext() || Html.IsClient()))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i>Search <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Systems", "Index", "System")
                        @Html.MenuLink("Machines", "Index", "Machine")
                        @Html.MenuLink("Components", "Index", "Component")
                        @Html.MenuLink("Exceptions", "Index", "Exception")
                    </ul>
                </li>
            }
            @if (Html.HasPermission(Category.ORDER) && Html.OrderModuleEnabled())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-briefcase"></i>Order <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Customers", "Customers", "Order")
                        @Html.MenuLink("Machine Orders", "MachineOrders", "Order")
                    </ul>
                </li>
            }
            @if (Html.HasAssetContext())
            {
                if (Html.HasPermission(Category.REPORT))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-file-text"></i>Report <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Exception Charts", "Index", "Chart")
                            <li class="divider"></li>
                            @Html.MenuLink("PM Compliance By Machine", "MachinePmCompliance", "Report")
                            @Html.MenuLink("PM Compliance By Component", "ComponentPmCompliance", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("MTBE By Machine", "MachineMeanTimeBetweenException", "Report")
                            @Html.MenuLink("MTBE By Component", "ComponentMeanTimeBetweenException", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("Cost Benefit Analysis", "CostAnalysis", "Report")
                            @Html.MenuLink("Asset Hierarchy", "AssetHierarchy", "Report")
                        </ul>
                    </li>
                }
                if (Html.HasPermission(Category.DOCUMENT))
                {
                    <li><a href="@Url.Action("Documents", "Document")"><i class="icon-file"></i>Documents</a></li>
                }
                if (Html.HasPermission(Category.DATA_ENTRY))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i>Data <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Identification Reports", "IdentificationReports", "Report")
                            @Html.MenuLink("Component Checklist", "ComponentChecklist", "Data")
                            @Html.MenuLink("Manage Engineers", "Engineers", "Data")
                        </ul>
                    </li>
                }
            }
            @if (Html.HasCompanyContext() || Html.IsClient())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-anchor"></i>Assets <b class="caret"></b></a>
                    @Html.AssetMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.SELECT_COMPANY))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-building"></i>Companies <b class="caret"></b></a>
                    @Html.CompanyMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.ADMINISTRATION))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i>Admin <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Companies", "Companies", "Administration")
                        @Html.MenuLink("Assets", "Assets", "Administration")
                        @Html.MenuLink("Users", "Users", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Applications", "Applications", "Administration")
                        @Html.MenuLink("Bearings", "Bearings", "Administration")
                        @Html.MenuLink("Departments", "Departments", "Administration")
                        @Html.MenuLink("Environments", "Environments", "Administration")
                        @Html.MenuLink("Faults", "Faults", "Administration")
                        @Html.MenuLink("Manufacturers", "Manufacturers", "Administration")
                        @Html.MenuLink("Severities", "Severities", "Administration")
                        @Html.MenuLink("Techniques", "Techniques", "Administration")
                        @Html.MenuLink("Templates", "Templates", "Administration")
                        @Html.MenuLink("Work Order Statuses", "WorkOrderStatuses", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Import Data", "ImportData", "Administration")
                        @Html.MenuLink("Audit History", "AuditHistory", "Administration")
                    </ul>
                </li>
            }
            @if (!Html.IsClient())
            {
                <li><a href="@Url.Action("Index", "Info")"><i class="icon-info"></i>Info</a></li>
            }
        </ul>
           </div>
</nav>

Answer 1

正如我在评论中所说，在引导程序之后导入一个自定义 css 文件并尝试以下操作：

.dropdown-menu {
  max-height:150px;
  overflow-y:scroll;
}