Question

我正在尝试使用子菜单实现可滚动的下拉菜单。我使用this帖子中的css在bootstrap 3中有子菜单。问题是子菜单隐藏在容器中，或者在容器内有水平滚动条可见。

以下是我的http://www.bootply.com/1OsPZq7WJC

供参考，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>

和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

除非您定义特定高度，否则无法强制页面采用下拉菜单的高度。这是您需要为整页高度添加的CSS。

body{
  height:100vw;
}

Fiddle

可滚动的下拉菜单，其中包含Bootstrap中的子菜单

1 个答案: