使用分层子菜单约束Bootstrap下拉列表的高度

Question

我试图约束下拉菜单的高度，该菜单本身有下拉子菜单。在父菜单上使用max-height: 150px; overflow-y: scroll;成功阻止它滚动，但它导致子菜单不再呈现。

如何在不破坏子菜单的情况下约束父菜单的高度？我尝试了以下但没有成功：bootply

HTML

<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
  <ul class="nav navbar-nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu fixed-height">
        <li><a href="#">Dropdown Link 1</a></li>
        <li><a href="#">Dropdown Link 2</a></li>
        <li><a href="#">Dropdown Link 3</a></li>
        <li><a href="#">Dropdown Link 4</a></li>
        <li><a href="#">Dropdown Link 5</a></li>
        <li><a href="#">Dropdown Link 6</a></li>
        <li class="divider"></li>
        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 7</a>
          <ul class="dropdown-menu">
            <li><a href="#">Dropdown Submenu Link A</a></li>
            <li><a href="#">Dropdown Submenu Link B</a></li>
            <li><a href="#">Dropdown Submenu Link C</a></li>
            <li><a href="#">Dropdown Submenu Link D</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.fixed-height  {
  overflow-y: scroll;
  max-height: 150px;
}
.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 > a:after {d
  isplay: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:#555;

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

JS

(function($){
  $(document).ready(function(){
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault(); 
      event.stopPropagation(); 
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
  });
})(jQuery);