微客导航 » 文章资讯 » Bootstrap 3多级下拉菜单实例

Bootstrap 3多级下拉菜单实例

2023-09-20 15:05:07 180

Bootstrap虽好，但对于复杂的界面，还是有N多组件需要自己扩展，并且要往简洁、大气的Bootstrap界面上靠，着实要费一些功夫。下面分享一个Bootstrap3的多级下拉菜单，无需第三方Js脚本，复制后直接可用。





Bootstrap3的多级下拉菜单示例




.dropdown-submenu{
position:relative;
}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:06px6px6px;
-moz-border-radius:06px6px;
border-radius:06px6px6px;
}
.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:5px05px5px;
border-left-color:#ccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#fff;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px06px6px;
-moz-border-radius:6px06px6px;
border-radius:6px06px6px;
}





Bootstrap3多级下拉菜单



下拉多级菜单


一级菜单
一级菜单


一级菜单

二级菜单


二级菜单

三级菜单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Bootstrap 3多级下拉菜单实例

Bootstrap3多级下拉菜单

热门推荐

随机推荐