Submenu is not opening up when provide Scrollbar to the menu - html

Question

We have a very large menu, so we have provided a scrollbar to that menu. But due to that scrollbar sub-menu are stopped to opening up.
<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>
{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown">
{{item.name}}<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<template is="dom-if" if="{{!item.subMenuItems}}">
<li>{{item.name}}
</li>
</template>
<template is="dom-if" if="{{item.subMenuItems}}">
<li class="dropdown dropdown-submenu">
{{item.name}}<span class="caret-right pull-right"></span>
<ul class="dropdown-menu">
<template is="dom-repeat" items="{{item.subMenuItems}}">
<li>{{item.name}}</li>
</template>
</ul>
</li>
</template>
</template>
</ul>
</li>
</template>
</template>
</ul>
</div>
and the CSS code is
.scrollable-menu{
height: auto;
max-height: 400px;
overflow-x: hidden;
}
The scrollbar is coming up properly but sub-menu stops to open up. Please suggest

Answer 1

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