如何在 Twitter Bootstrap 2 中创建多级下拉菜单？

Twitter Bootstrap 2 中的多级下拉菜单

可以使用 Twitter Bootstrap 2 中的元素创建多级下拉菜单，即使本机不支持此功能.

更新答案（Bootstrap v2.1.1)

Bootstrap 现在在 v2.1.1 中默认支持多级下拉菜单。更新后的样式表提供了嵌套下拉菜单的样式。

原始答案

最初，Bootstrap 不提供子菜单支持。但是，可以通过利用 CSS 和 HTML 来实现自定义解决方案。

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

HTML

添加嵌套下拉菜单的 .sub-menu 类items:

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

此解决方案将嵌套下拉菜单放置在父菜单项的右侧，并添加一个箭头来指示可单击的子菜单。

以上是如何在 Twitter Bootstrap 2 中创建多级下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！