Twig递归菜单仅适用于第二级

Question

我有以下递归宏工作正常但不是我想要的方式。
我希望在此codepen中显示我的菜单，将鼠标悬停在services上。

如何获得生成的html的相同结构？

{% extends '::base.html.twig' %}
{% import _self as forms %}
{% macro recursive(item) %}
    {% import _self as forms %}
    <li class="nav-item">
        {% if item.__children|length %}
            {% if item.treeLevel == 0 %}
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{ item.name }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    {% for item in item.__children %}
                        {{ forms.mega(item) }}
                    {% endfor %}
                </div>
            {% endif %}
        {% endif %}
        {% if item.__children is empty %}
            <a class="nav-link" href="#">{{ item.name }}</a>
        {% endif %}
    </li>
{% endmacro %}
{% macro mega(item) %}
    {% import _self as forms %}
    <ul class="">
        {% if item.__children|length %}
            {% for item in item.__children %}
                {{ forms.mega(item) }}
            {% endfor %}
        {% endif %}
        <li>
            <a class="dropdown-item" href="#">{{ item.name }}</a>
        </li>
    </ul>
{% endmacro %}
{% block body %}
    {{ dump(tree) }}
    {% if tree %}
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                    data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    {% for item in tree %}
                        {{ forms.recursive(item) }}
                    {% endfor %}
                </ul>
            </div>
        </nav>
    {% endif %}
{% endblock %}

编辑：

＆＃13;

＆＃13;

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Homepage</a>
      </li>

      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Idea
                </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <ul class="">
            <li>
              <a class="dropdown-item" href="#">Company</a>
            </li>
          </ul>

          <ul class="">
            <ul class="">
              <li>
                <a class="dropdown-item" href="#">asdasd</a>
              </li>
            </ul>

            <li>
              <a class="dropdown-item" href="#">Services</a>
            </li>
          </ul>

          <ul class="">
            <li>
              <a class="dropdown-item" href="#">Google</a>
            </li>
          </ul>

        </div>
      </li>

    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;