We have a wide variety of options on our menu, so we've added a scrollbar to make it easier to navigate. However, the sub-menus aren't expanding as they should because of the scrollbar.
<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>
Here's the CSS code that might be affecting it:
.scrollable-menu{
height: auto;
max-height: 400px;
overflow-x: hidden;
}
The scrollbar functions correctly, but the issue lies with the sub-menus not opening up. We're open to suggestions on how to address this problem.