Bootstrap最近从版本3.x中删除了子菜单功能，因此它不再支持多级菜单。
但是Drupal8有一个多级菜单结构。
将介绍如何在bootstrap中恢复子菜单特性，以及如何在drupal8中呈现多级菜单。
只需在自定义css中复制并粘贴以下css，它是从bootstrap版本2.x中获取的，并进行了一些自定义更改，

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    padding: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu > a:after {
  content: "\e080";
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-size: 10px;
  float: right;
  margin-top: 5px;
}
.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.navbar-nav li:last-child > .dropdown-menu {
  left: auto;
  right: 0px;
}
.navbar-nav li:last-child > .dropdown-menu a {
  text-align: right !important;
}
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > a:after {
  float: left;
  content: "\e079";
}
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > .dropdown-menu {
  left: -100%;
}

这足以恢复子菜单特性，但棘手的是，我们必须呈现drupal菜单以支持引导子菜单。
创建菜单--main.html.twig在templates/文件夹中归档，并将以下代码复制/粘贴到其中。

{# All menu and submenu items #}
<div class="navbar">
  <div class="navbar-header pull-right">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar">
      <span class="icon-bar">
      <span class="icon-bar">
    </button>
    <div class="collapse navbar-collapse">
      {% import _self as menus %}
      {#
        We call a macro which calls itself to render the full tree.
        @see https://twig.sensiolabs.org/doc/tags/macro.html
      #}
      {{ menus.menu_links(items, attributes, 0) }}
      {% macro menu_links(items, attributes, menu_level) %}
        {% import _self as menus %}
        {% if items %}
          {% if menu_level == 0 %}
            <ul class="nav navbar-nav" role="menu" aria-labelledby="dropdownMenu">
          {% else %}
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          {% endif %}
          {% for item in items %}
            {% if item.below %}
              {% if menu_level == 0 %}
                <li class="dropdown">
                  <a href="{{ item.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ item.title }} <span class="caret"></a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% else %}
                <li class="dropdown-submenu">
                  <a href="{{ item.url }}">{{ item.title }}</a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% endif %}
            {% else %}
              <li {{ item.attributes }}>{{ link(item.title, item.url) }}</li>
            {% endif %}
          {% endfor %}
          </ul>
        {% endif %}
      {% endmacro %}
    </div>
  </div>
</div>

我一直在代码中使用twig的宏功能。
宏可以与常规编程语言中的函数相比较。

它们用于将常用HTML习惯用法放入可重用元素中。
最后，别忘了清除drupal缓存！然后享受你的多级菜单。