向菜单提供滚动条时未打开子菜单答案

【问题标题】：Submenu is not opening up when provide Scrollbar to the menu向菜单提供滚动条时未打开子菜单
【发布时间】：2019-12-13 16:57:53
【问题描述】：

我们有一个非常大的菜单，因此我们为该菜单提供了一个滚动条。但由于该滚动条子菜单停止打开。

   <div id="navbar3" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" id="menus-list">
                        <template is="dom-repeat" items="{{menuItems}}">
                            <template is="dom-if" if="{{!item.subMenuItems}}">
                                <li>
                                    <a href='{{item.url}}' menu-url="{{item.url}}" on-click="handleMenuItemClick">{{item.name}}</a>
                                </li>
                            </template>
                            <template is="dom-if" if="{{item.subMenuItems}}">
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{item.name}}<span class="caret"></span></a>
                                    <ul class="dropdown-menu scrollable-menu">
                                        <template is="dom-repeat" items="{{item.subMenuItems}}">
                                            <template is="dom-if" if="{{!item.subMenuItems}}">
                                                <li><a href='{{item.url}}' on-click="handleMenuItemClick" menu-url="{{item.url}}">{{item.name}}</a>
                                                </li>        
                                            </template>
                                            <template is="dom-if" if="{{item.subMenuItems}}">
                                                <li class="dropdown dropdown-submenu">
                                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">{{item.name}}<span class="caret-right pull-right"></span></a>
                                                    <ul class="dropdown-menu">
                                                        <template is="dom-repeat" items="{{item.subMenuItems}}">
                                                            <li><a href='{{item.url}}' on-click="handleMenuItemClick" menu-url="{{item.url}}">{{item.name}}</a></li>
                                                        </template>
                                                    </ul>
                                                </li>
                                            </template>
                                        </template>
                                    </ul>
                                </li>
                            </template>
                        </template>
                    </ul>
                </div>

CSS 代码是

.scrollable-menu{
                height: auto;
            max-height: 400px;
            overflow-x: hidden;
            }

滚动条正常显示，但子菜单停止打开。请推荐

【问题讨论】：

试试overflow: auto;
它不起作用。它为菜单下拉菜单本身提供了一个水平条，但不允许做任何事情
有人有什么想法吗？
创建一个像 jsfiddle 这样的工作示例
我不能让它成为 AWS s3 下聚合物组件的一部分。

标签： html css drop-down-menu bootstrap-4 scrollbar

【解决方案1】：

试试这个：

.scrollable-menu
{
    overflow-x: auto;
    max-height: 400px;
}

【讨论】：