Building 2 differently styled sub menus

Question

I'm trying to separate my dropdown menus so that I can style them differently.

One would be for menu's with just children and the other would be for menu's with children and child.children (third level).

I'm having trouble with the way to write the if statement because i'm not very familiar with twig but am updating a website that has been built in twig.

this is what i've tried but the I know my if statement trying to call only menu's with children and a third level items is wrong: "{% if item.children and child.children %}"

<ul class="primary-menu">
    {% for item in menu_primary.items %}
        <li class="primary-item {{ item.classes | join(' ') }} menu-item">
            <a target="{{ item.target }}" href="{{ item.link }}" class="primary-link {% if item.children %}js-submenu{% endif %}">{{ item.title }}</a>

            {# mega menu #}

            {% if item.children and child.children %}
                <div class="submenu-container-mega">
                    <ul class="submenu-mega">
                    {% for child in item.children %}
                        <li class="submenu-item {{ child.classes | join(' ') }}">
                            <a target="{{ child.target }}" href="{{ child.link }}" class="menu-link submenu-link">{{ child.title }}</a>

                            {% if child.children %}
                            <ul class="submenu-mega">
                                {% for third in child.children %}
                                <li class="submenu-item {{ third.classes | join(' ') }}">
                                    <a target="{{ third.target }}" href="{{ third.link }}" class="menu-link submenu-link">{{ third.title }}</a>
                                </li>
                                {% endfor %}

                                {# for third in child.children #}
                            </ul>
                            {% endif %}
                            {# if child.children #}
                        </li>
                    {% endfor %}
                    {# for child in item.children #}
                    </ul>
                </div>
            {% endif %}
            {# end item.children #}

            {# end mega menu #}



            {# normal sub menu #}
            {% if item.children %}
            <div class="submenu-container">
                <ul class="submenu">
                    {% for child in item.children %}
                    <li class="submenu-item {{ child.classes | join(' ') }}">
                        <a target="{{ child.target }}" href="{{ child.link }}" class="menu-link submenu-link">{{ child.title }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {# end normal submenu #}
    </li>
{% endfor %}
</ul>