Scrollable dropdown menu with submenus in Bootstrap

Question

I am trying to achieve scrollable dropdown menu with sub-menus. I used the css from this post to have sub-menus in bootstrap 3. The problem is that the sub-menu is hidden within the container or is visible with a horizontal scrollbar within the container.

Here is what I have http://www.bootply.com/1OsPZq7WJC

For reference, HTML:

  <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
            <ul class="dropdown-menu scrollable-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li class="dropdown-submenu"><a href="#">Submenu</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action 1</a></li>
                    <li><a href="#">Action 2</a></li>
                    <li><a href="#">Action 3</a></li>
                    <li><a href="#">Action 4</a></li>
                    <li><a href="#">Action 5</a></li>
                    <li><a href="#">Action 7</a></li>
                  </ul>
                </li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="dropdown-submenu"><a href="#">Submenu</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action 1</a></li>
                    <li><a href="#">Action 2</a></li>
                    <li><a href="#">Action 3</a></li>
                    <li><a href="#">Action 4</a></li>
                    <li><a href="#">Action 5</a></li>
                    <li><a href="#">Action 7</a></li>
                  </ul>
                </li>
             </ul>
  </div>

And CSS:

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: visible;
  overflow-y: scroll;
}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

I don't think scrollable inside a dropdown is going to work. The submenus are design for a non-scrolling parent. — Carol Skelly, Jul 08 '16 at 19:49
Somehow they manage to get it working here: [Scrollable menu with pop out submenus](https://codepen.io/agop/pen/VwwMGR) — Pieterjan, Jan 20 '23 at 10:15

score 0 · Answer 1 · answered Jul 08 '16 at 19:51

0

You can't force the page to adopt the height of the drop down menu unless you define a specific height. Here is the css you need to add for a full page height.

body{
  height:100vw;
}

Fiddle.

answered Jul 08 '16 at 19:51

The sub-menu is still within the container with a horizontal scrollbar. This is the behavior that I wanted to fix. – Vivek Jul 08 '16 at 21:07
1

Hi Fahad, How did you fix? Even I am also looking for a same solution. – Udaya Vani Sep 10 '18 at 20:31
Hi, any solution for this issue? – Suhail Oct 09 '20 at 11:14
Is there any possibility of achieving it? – N.K Aug 02 '23 at 04:48

Scrollable dropdown menu with submenus in Bootstrap

1 Answers1