Bootstrap 3多级下拉菜单实例

前端之家收集整理的这篇文章主要介绍了Bootstrap 3多级下拉菜单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<Meta charset="UTF-8"> Bootstrap 3 的多级下拉<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>示例 @H_404_8@ .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; 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: #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: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
Bootstrap 3多级下拉菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Bootstrap相关文章