Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
下面給大家分享bootstrap多級下拉菜單功能的實例代碼。
先給大家看下效果圖：
- 需要引用bootstrap.min.css和bootstrap.min.css.js
- 代碼如下
<head><meta charset="UTF-8"><title>Bootstrap 3 的多級下拉菜單示例</title><link rel="stylesheet" href="~/Content/bootstrap.min.css" /><script type="text/javascript" src="~/Content/bootstrap.min.css.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><div class="container"><div class="row"><h2>Bootstrap 3多級下拉菜單</h2><hr><div class="dropdown"><a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" href="javascript:;">下拉多級菜單 <span class="caret"></span></a><ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"><li class="dropdown-submenu"><a tabindex="-1" href="javascript:;">總經理</a><ul class="dropdown-menu"><li><a tabindex="-1" href="javascript:;">經理1</a></li><li><a tabindex="-1" href="javascript:;">經理2</a></li></ul></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="divider"></li><li class="dropdown-submenu"><a href="javascript:;">員工</a><ul class="dropdown-menu"><li><a href="javascript:;">互 評</a></li><li><a href="javascript:;">不互評</a></li></ul></li></ul></li></ul></div></div></div></body>以上所述是小編給大家介紹的Bootstrop實現多級下拉菜單功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
