Navigation with different submenu layout

<nav>
<ul>
<li><a href="/">Home</a></li>
<ul class="dropdown-menu">
        <li class="dropdown-submenu"><a href="#"><i class="fa fa-heart"></i>Submenu</a>
                     <ul class="dropdown-menu">
                           <li><a href="#">Menuitem</a></li>
                            <li class="dropdown-submenu"><a href="#">Menuitem with sub</a>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">......</a></li>

{% macro loop(page) %}
    {% for p in page.children.visible %}
        {% if p.children.visible.count > 0 %}
            <li class="dropdown">
                <a href="{{ p.url }}">
                    {{ p.menu }}
                </a>
                <ul class="dropdown-menu">
                    {{ _self.loop(p) }}
                </ul>
            </li>

<nav>
    <ul>
        <li class="dropdown">
            <a href="#">First Level Menu Item</a>
            <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                    <a href="#">Second Level Menu Item</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Third Level Menu Item One</a></li>
                        <li><a href="#">Third Level Menu Item Two</a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>