菜单列表溢出 HTML（也在 iframe 中）

Question

主要问题是菜单项从页面溢出到底部。我试图解决这个问题，但我没有这样做，我真的把自己烧毁了，试图解决它。此菜单位于 iframe 中，但不管问题仍然存在，即使它位于常规页面上。问题图片如下：

这里是代码

<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="roleMenu" class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul id="menuUL" class="nav navbar-nav">
                        <li{{ (Request::is('admin') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li{{ (Request::is('admin/blogs*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Pages</a></li>
                        <li{{ (Request::is('admin/comments*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-bullhorn"></span> Comments</a></li>
                        <li{{ (Request::is('admin/menuBuilder*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-bullhorn"></span> Menu Builder</a></li>
                        <li class="dropdown{{ (Request::is('admin/users*|admin/roles*') ? ' active' : '') }}">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="{{{ URL::to('admin/users') }}}">
                                <span class="glyphicon glyphicon-user"></span> Users <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li{{ (Request::is('admin/users*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-user"></span> Users</a></li>
                                <li{{ (Request::is('admin/roles*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-user"></span> Roles</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="{{{ URL::to('/') }}}">View Homepage</a></li>
                        <li class="divider-vertical"></li>
                        <li class="dropdown">
                                <a  class="dropdown-toggle"  data-toggle="dropdown" href="#">
                                    <span class="glyphicon glyphicon-user"></span> {{{ Auth::user()->username }}}   <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu " style="overflow:scroll"; >
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> A</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> B</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> C</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> d</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> e</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> f</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> g</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> h</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> i</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> j</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> k</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> l</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> m</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> n</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> o</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> p</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> q</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> r</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> s</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> t</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> u</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> v</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> w</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> x</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> y</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> z</a></li>
                                    <li class="divider"></li>

                                </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

采取多种方法：

1) 设置溢出：滚动到下拉类：

结果：有效，但一点也不理想。

2) 设置溢出：滚动到下拉菜单类：

结果：出现一个滚动条但没有做任何事情（也就是滚动不起作用）

3) 尝试在这里解决。如果我更改 html 或 css 以使其兼容，它会破坏其他已经制作的东西并且看起来很糟糕。如果有人能帮我解决这个问题，我将不胜感激。

更多信息帮助： 我的代码基于一个 laravel 入门套件：https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site

我在这方面做了几个小时的研究，但这似乎不是一个简单的解决方案，主要是因为我的菜单栏的结构方式。任何愿意提供帮助、css、javascript 或任何其他可以帮助我的人都将不胜感激。

Answer 1

也许您应该将高度设置为下拉菜单类，否则 'overflow:auto' 将不起作用