bootstrap 虽好，但对于复杂的界面，还是有n多组件需要自己扩展，并且要往简洁、大气的bootstrap界面上靠，着实要费一些功夫。下面分享一个bootstrap 3的多级下拉菜单，无需第三方js脚本，复制后直接可用。
【相关视频推荐：bootstrap教程】
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>bootstrap 3 的多级下拉菜单示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/> <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <style type="text/css"> .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; 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; } </style> </head> <body> <p class="container"> <p class="row"> <h2>bootstrap 3多级下拉菜单</h2> <hr> <p class="dropdown"> <a id="dlabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="javascript:;"> 下拉多级菜单 <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownmenu"> <li><a href="javascript:;">一级菜单</a></li> <li><a href="javascript:;">一级菜单</a></li> <li class="pider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="javascript:;">一级菜单</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="javascript:;">二级菜单</a></li> <li class="pider"></li> <li class="dropdown-submenu"> <a href="javascript:;">二级菜单</a> <ul class="dropdown-menu"> <li><a href="javascript:;">三级菜单</a></li> </ul> </li> </ul> </li> </ul> </p> </p> </p> </body> </html>
相关推荐：
用css3实现动画下拉菜单效果的实现步骤
js实现下拉菜单的显示与隐藏
jquery实现下拉菜单的功能实例代码
以上就是bootstrap 3多级下拉菜单实例的详细内容。