Bootstrap使用AdminLTE css创建第三个菜单级别

Question

我目前使用的是AdminLTE模板。

但我正在努力与第三级菜单。我刚刚尝试过使用和不使用此插件，但我无法弄清楚我做错了什么，因为我的第三级菜单没有显示出来。

Here's the jsfiddle。

而且还是一个图像，显示发生了什么事情。

我读过，自引导3以来dropdown-submenu已实施，我试图使用它，没有任何成功。

<ul class="dropdown-menu"> 
    <li><a href="#">Login</a></li> 
    <li class="dropdown-submenu"> 
     <a tabindex="-1" href="#">More options</a> 
     <ul class="dropdown-menu"> 
     <li><a tabindex="-1" href="#">Second level</a></li> 
     <li class="dropdown-submenu"> 
      <a href="#">More..</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">3rd level</a></li> 
       <li><a href="#">3rd level</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

我已经搜索了谷歌和I found this example，这是我正在尝试实施的。

Answer 1

据我所知，bootstrap3没有默认的多级下拉功能。您用作标记的内容取自此“extension”。

你只是缺乏根据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; 
} 

Your updated fiddle