Twig recursive menu applied only to the second level - recursion

Question

I have the following recursive macro which works fine but not the way i want it.
I want to display my menu like in this codepen, hover over services.
How can i get the same structure of the generated 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 %}
EDIT:
<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>