带子菜单的 HTML 水平滚动导航栏

Question

我有一个内部网页，它有一个很大的导航栏，如果用户的显示器很小，它会导致子菜单显示在屏幕之外。我的想法是让导航栏滚动，但是当我在 CSS 中使用溢出时，当子菜单打开时会出现垂直滚动条。我希望子菜单显示在包含导航栏的 div 的外部。我愿意接受所有想法，包括在必要时重组我的页面。

示例 HTML 是:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
             <div class="scrollmenu">
                  <li class="menu-item dropdown dropdown-submenu">
                       <a href="#" id="" role="button" data-toggle="dropdown">Some Text</a>
                                <ul class="dropdown-menu">
                                    <li class="menu-item dropdown dropdown-submenu">
                                        <a href="#" id="" role="button" data-toggle=""></a>
                                        <ul class="dropdown-menu scrollable-menu">
                                            <li class="menu-item">
                                                <a id="" class="pdf" href="#"></a>
                                                <a id="" class="pdf" href="#"></a>
                                                <a id="" class="pdf" href="#"></a>
                                                <a id="" class="pdf" href="#"></a>
                                                <a id="" class="pdf" href="#"></a>
                                            </li>
                                        </ul>
                                    </li>
                   </li>
                </div>
           </div>
</div>

我使用的 CSS 是(我在 W3schools.com 上找到的这个 CSS):

div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    width: 50%;
}

div.scrollmenu a {
    display: inline-block;
    /*color: white;*/
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

我遇到的问题是，为了获得滚动条，我必须使用 overflow: CSS 中的自动设置。但是当我这样做时，它会导致子菜单出现在同一个 div 中，这会导致在显示子菜单时出现垂直滚动条。如果没有溢出设置，子菜单将显示在 div 之外，这是所需的行为；但是，当然，滚动条不会出现。

请帮忙。

仅供引用，我正准备回家过周末，并将在周一跟进此事。

提前致谢。

Answer 1

滚动导航栏对于带有子菜单的导航栏来说不是一个好的设计。我们决定将导航栏更改为 Accordion 式导航。