Css 引导多级下拉菜单未扩展

我正在使用Bootstrap进行多级下拉菜单的体验，我已经确保我拥有最新版本的Bootstrap。我的代码很简单。问题是子级别未扩展（未显示）

我怀疑html有问题：

<div class="dropdown">
<a href="#" id = "Service_1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Service 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
    <a class="trigger right-caret">Color</a>
    <ul class="dropdown-menu sub-menu">
      <li>Green</li>
      <li>Red</li>
      <li>Blue</li>
    </ul>
</li>
<li class="divider"></li>
<li>
    <a class="trigger right-caret">Names</a>
    <ul class="dropdown-menu sub-menu">
       <li>James</li>
       <li>Mike</li>
       <li>Bob</li>
    </ul>
</li>
</ul>
</div>    

请分享你的想法。谢谢
 您是否包括jQuery？
顺便说一句，您可以编写相应的JS脚本以获得多级子菜单，如下代码所示：

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

下面是一个很好的例子：

您是否包括jQuery？
顺便说一句，您可以编写相应的JS脚本以获得多级子菜单，如下代码所示：

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

下面是一个很好的例子：

您只能通过CSS来实现这一点。以下是如何：

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="...">
  ...
  <li class="dropdown-submenu" role="presentation">
    <a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Menu item 1</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="...">
      <li><a role="menuitem" href="#">Submenu item 1</a></li>
      <li><a role="menuitem" href="#">Submenu item 2</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

您只能通过CSS来实现这一点。以下是如何：

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="...">
  ...
  <li class="dropdown-submenu" role="presentation">
    <a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Menu item 1</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="...">
      <li><a role="menuitem" href="#">Submenu item 1</a></li>
      <li><a role="menuitem" href="#">Submenu item 2</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

解决了。问题是在我的css中，我遗漏了这一部分

.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

解决了。问题是在我的css中，我遗漏了这一部分

.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

您能提供脚本代码吗？Bootstrap不提供“多级子菜单”。下拉子菜单的CSS规则在哪里？@stratovarius请查看添加的脚本file@Khalid你能提供脚本代码吗？Bootstrap不提供“多级子菜单”。下拉子菜单的CSS规则在哪里？@stratovarius请查看添加的脚本file@KhalidI don’我看不到上面这正是我学习的例子。但它在我的机器上不工作@stratovariusAlso我使用与fiddlestrange中相同的css，您能在JSFIDLE中提供您的示例吗？另外，您是否连接了jquery？将此代码
var-online=navigator.online；警报（在线）
在脚本的开头，查看它是否返回true或false。可能是因为我将脚本文件放入了script.js中。这正是我正在学习的示例。但它在我的机器上不工作@stratovariusAlso我使用与fiddlestrange中相同的css，您能在JSFIDLE中提供您的示例吗？另外，您是否连接了jquery？将此代码
var-online=navigator.online；警报（在线）在脚本的开头，看看它是真是假。可能是因为我把脚本文件放在了一个脚本中。谢谢，但我也很好奇为什么带有javascript的版本不起作用。我认为你的JSFIDLE可以工作。我刚刚测试过。您只需要在Javascript面板中启用jQuery 1.12.0（并设置“Load type”：onDomready）T谢谢，但我也很好奇为什么带有Javascript的版本不起作用，我认为您的JSFIDLE可以工作。我刚刚测试过。您只需要在Javascript面板中启用jQuery 1.12.0（并设置“Load type”：onDomready）