bootstrap 多级下拉菜单

如上效果；

实现代码：

导入js和css：

1     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
2     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
3     <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

html code：

 1 <div class="container">
 2     <div class="row">
 3         <div class="dropdown" >
 4             <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-success" data-target="#" href="/page.html">
 5                 xx <span class="caret"></span>
 6             </a>
 7             <ul style="text-align: center" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
 8               <li class="dropdown-submenu">
 9                 <a tabindex="-1" href="#">xx</a>
10                 <ul class="dropdown-menu">
11                      <li style="text-align: center">
12                       <a tabindex="-1" href="#">xx</a>
13                      </li>
14                      <li class="divider"></li>
15                     <li style="text-align: center">
16                     <a href="#">xx</a>
17                    </li>
18                 </ul>
19               </li>
20             </ul>
21         </div>
22     </div>
23 </div>

css：

 1 <style>
 2
 3 .dropdown-submenu {
 4     position: relative;
 5 }
 6
 7 .dropdown-submenu>.dropdown-menu {
 8     top: 0;
 9     left: 100%;
10     margin-top: -6px;
11     margin-left: -1px;
12     -webkit-border-radius: 0 6px 6px 6px;
13     -moz-border-radius: 0 6px 6px;
14     border-radius: 0 6px 6px 6px;
15 }
16
17 .dropdown-submenu:hover>.dropdown-menu {
18     display: block;
19 }
20
21 .dropdown-submenu>a:after {
22     display: block;
23     content: " ";
24     float: right;
25     width: 0;
26     height: 0;
27     border-color: transparent;
28     border-style: solid;
29     border-width: 5px 0 5px 5px;
30     border-left-color: #ccc;
31     margin-top: 5px;
32     margin-right: -10px;
33 }
34
35 .dropdown-submenu:hover>a:after {
36     border-left-color: #fff;
37 }
38
39 .dropdown-submenu.pull-left {
40     float: none;
41 }
42
43 .dropdown-submenu.pull-left>.dropdown-menu {
44     left: -100%;
45     margin-left: 10px;
46     -webkit-border-radius: 6px 0 6px 6px;
47     -moz-border-radius: 6px 0 6px 6px;
48     border-radius: 6px 0 6px 6px;
49 }
50     </style>