Scrollbares Dropdown-Menü mit Untermenüs in Bootstrap

Question

Ich versuche scrollbares Dropdown-Menü mit Untermenüs zu erreichen. Ich habe die Css von this post verwendet, um Untermenüs in Bootstrap 3 zu haben. Das Problem ist, dass das Untermenü im Container versteckt ist oder mit einer horizontalen Bildlaufleiste innerhalb des Containers sichtbar ist. Hier

ist, was ich http://www.bootply.com/1OsPZq7WJC

Als Referenz haben, 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> 

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

Answer 1

Sie können die Seite nicht zwingen, die Höhe des Tropfens zu adoptieren Down-Menü, es sei denn, Sie definieren eine bestimmte Höhe. Hier ist das CSS, das Sie für eine ganze Seitenhöhe hinzufügen müssen.

body{ 
    height:100vw; 
} 

Fiddle.