在Bootstrap中实现带有子菜单的可滚动下拉菜单

Question

在Bootstrap中实现带有子菜单的可滚动下拉菜单

10

我正在尝试使用可滚动的下拉菜单和子菜单。我使用这篇文章中提供的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;}

- Vivek

只需将身体高度增加一些即可。 - user379888

1

我认为在下拉菜单中添加滚动条不会起作用。子菜单是设计为非滚动父级的。 - Carol Skelly

Vivek，你找到这个问题的解决方案了吗？ - PalakM

1

同样的问题在这里..！ - vishnu

不知怎么的，他们在这里成功地实现了：可滚动菜单和弹出子菜单。 - Pieterjan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user379888 · Answer 1

除非您定义了特定的高度，否则无法强制页面采用下拉菜单的高度。以下是您需要添加的 CSS 以实现全页高度。

body{
  height:100vw;
}

Fiddle。