Split list into 2 columns if more than 6 child elements

Question

I have a list with dynamically generated list items. Now I want to split the list into 2 columns. I'm new to html, js, etc... and I really don't know how to do that. Would be nice if anyone could help me.

here is my code:

<ul class="sub-menu">
  <ul class="inner-sub-menu">
    {% for submenu in menuItem.submenu %}
    <li class="sub-li-item">
      {{ render( controller( "ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "sub-menu"} ) ) }}
    </li>
    {% endfor %}
  </ul>
  <ul class="inner-sub-menu-second">
  </ul>
</ul>

EDIT:

I got the solution. You have to divide the length by 2 and then check if the length is higher than 6. After that just close the ul tag and open another one.

{% if menuItem.submenu|length > 0 %}
                {% set secondColumn = (menuItem.submenu|length / 2)|round(0, 'ceil') %}
                <div class="sub-menu">
                    <ul class="inner-sub-menu">
                    {% for submenu in menuItem.submenu %}
                        {% if (loop.index0 == secondColumn) and menuItem.submenu|length > 6 %}
                            </ul><ul class="inner-sub-menu">
                        {% endif %}
                        <li class="sub-li-item">
                            {{ render( controller( "ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "sub-menu"} ) ) }}
                        </li>
                    {% endfor %}
                    </ul>
                </div>
            {% endif %}