如上效果；
实现代码：
导入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 0; 26 height: 0; 27 border-color: transparent; 28 border-style: solid; 29 border- 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>