如何使用 Twitter Bootstrap 2 创建多级下拉菜单？-css教程-PHP中文网

如何使用 Twitter Bootstrap 2 创建多级下拉菜单？

Barbara Streisand

发布： 2024-11-28 02:39:15

原创

224 人浏览过

How Can I Create Multilevel Dropdown Menus with Twitter Bootstrap 2?

使用 Twitter Bootstrap 2 实现多级下拉菜单

Twitter Bootstrap 2 本身缺乏创建多级下拉菜单的功能。为了克服这一限制，开发人员使用额外的 CSS 和 HTML 元素设计了创造性的解决方法。

自定义 CSS 解决方案

一种方法涉及添加自定义 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;
}

登录后复制

此 CSS 将子菜单定位到与其父菜单项相邻的位置，并计算它们的尺寸和位置

注意：此方法在 Bootstrap 3 中已弃用，在更高版本中不再需要。

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