Nest child lists inside list items

It's not valid HTML for <ol> or <ul> tags to have
<ol> or <ul>'s as direct children.

See:
https://www.w3.org/TR/html52/grouping-content.html#the-ol-element
https://www.w3.org/TR/html52/grouping-content.html#the-ul-element

app/templates/components/sub-navigation.html

@@ -7,22 +7,32 @@
     <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for(item['link']) }}" itemprop="item">
       <span itemprop="name">{{item['name']}}</span>
     </a>
+    {% if caller %}
+      {{ caller() }}
+    {% endif %}
   </li>
 {% endmacro %}
 
+{% macro sub_navigation_item_sub_navigation(item) %}
+  <ol itemscope itemtype="http://schema.org/ItemList">
+    {% for sub_item in item.sub_navigation_items %}
+      {{ sub_navigation_item(sub_item) }}
+    {% endfor %}
+  </ol>
+{% endmacro %}
+
 {% macro sub_navigation(
   item_set
 ) %}
   <nav class="sub-navigation">
     <ol itemscope itemtype="http://schema.org/ItemList">
       {% for item in item_set %}
-        {{ sub_navigation_item(item) }}
         {% if item.sub_navigation_items %}
-          <ol itemscope itemtype="http://schema.org/ItemList">
+          {% call sub_navigation_item(item) %}
-            {% for sub_item in item.sub_navigation_items %}
+            {{ sub_navigation_item_sub_navigation(item) }}
-              {{ sub_navigation_item(sub_item) }}
+          {% endcall %}
-            {% endfor %}
+        {% else %}
-          </ol>
+          {{ sub_navigation_item(item) }}
         {% endif %}
       {% endfor %}
     </ol>