Html 多级下拉菜单不工作

我是前端开发新手。 我试图添加一个多级下拉菜单使用引导。这是我在网上找到的Haml代码。 当我点击

标题4

时，我能够获得第一级下拉菜单，但是如果我点击

子标题1

，它不会显示第二级下拉菜单，而是关闭父级下拉菜单

%nav.navbar.navbar-inverse.sidebar
  .container-fluid
    %a.navbar-brand{:href => "#"} API Reference
    #bs-sidebar-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{:href => "#"}
            Header 1
        %li
          %a{:href => "#"}
            Header 2
        %li
          %a{:href => "#"}
            Header 3
        %li.dropdown
          %a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
            Header 4
            %span.caret
          %ul.dropdown-menu
            %li.dropdown
              %a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
                Sub Heading 1
                %span.caret
              %ul.dropdown-menu
                %li
                  %a{:href => "#"} Sub Sub Heading 1
                %li
                  %a{:href => "#"} Sub Sub Heading 2
                %li
                  %a{:href => "#"} Sub Sub Heading 3
            %li
              %a{:href => "#"} Sub heading 2

.main
  / Main content goes here..

该代码提供以下输出：

不确定，我如何让它工作。我没有在现有的解决方案中使用Javascript

---

如果有人不熟悉haml，您可以使用查看html中的代码

您仅使用

下拉菜单

类，但您也应该使用

下拉子菜单

例如，请参见：