bootstrap 多级下拉菜单

如上效果；

实现代码：

导入js和css：

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

html code：

 <div class="container">
     <div class="row">
         <div class="dropdown" >
             <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-success" data-target="#" href="/page.html">
                 xx <span class="caret"></span>
             </a>
             <ul style="text-align: center" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
               <li class="dropdown-submenu">
                 <a tabindex="-1" href="#">xx</a>
                 <ul class="dropdown-menu">
                      <li style="text-align: center">
                       <a tabindex="-1" href="#">xx</a>
                      </li>
                      <li class="divider"></li>
                     <li style="text-align: center">
                     <a href="#">xx</a>
                    </li>
                 </ul>
               </li>
             </ul>
         </div>
     </div>
 </div>

css：

 <style>

 .dropdown-submenu {
     position: relative;
 }

 .dropdown-submenu>.dropdown-menu {
     top: ;
     left: %;
     margin-top: -6px;
     margin-left: -1px;
     -webkit-border-radius:  6px 6px 6px;
     -moz-border-radius:  6px 6px;
     border-radius:  6px 6px 6px;
 }

 .dropdown-submenu:hover>.dropdown-menu {
     display: block;
 }

 .dropdown-submenu>a:after {
     display: block;
     content: " ";
     float: right;
     width: ;
     height: ;
     border-color: transparent;
     border-style: solid;
     border-width: 5px  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: -%;
     margin-left: 10px;
     -webkit-border-radius: 6px  6px 6px;
     -moz-border-radius: 6px  6px 6px;
     border-radius: 6px  6px 6px;
 }
     </style>