html - 向菜单提供滚动条时子菜单未打开

Question

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

   <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;
            }   

滚动条正常出现，但子菜单停止打开。请建议

标签： htmlcssdrop-down-menubootstrap-4scrollbar

Answer 1

尝试这个：

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