Typoscript append content in menu after sub-items - typo3

Question

I want to create a popup menu with content elements of the items.
The structure in the backend is basically as follows:
Menu1
Submenu1.1
Submenu1.2
Submenu1.3
Menu2
Submenu2.1
Submenu2.2
Submenu2.3
Where Menu1 and Menu2 have content elements on the page.
I managed to access the content elements, however, the elements are rendered BEFORE the sub menu items. I need them after that.
What I get:
<div class="headeroverlay">
<div class="dropdown-overlay" id="overlay_4">
<!-- CONTENT ELEMENTS -->
<div class="contentimagesandtext">
<div class="item"><!-- Content Element 1 of Menu 1 --></div>
<div class="item"><!-- Content Element 2 of Menu 1 --></div>
</div>
<!-- SUB MENU -->
<div class="subnav-block">
<div class="subnav-link">Submenu1.1</div>
<div class="subnav-link">Submenu1.2</div>
<div class="subnav-link">Submenu1.3</div>
</div>
</div>
<div class="dropdown-overlay topdropdown" id="overlay_5">
<!-- same for Menu 2 -->
</div>
</div>
But I need content and submenu switched:
<div class="headeroverlay">
<div class="dropdown-overlay" id="overlay_4">
<!-- SUB MENU -->
<div class="subnav-block">
<div class="subnav-link">Submenu1.1</div>
<div class="subnav-link">Submenu1.2</div>
<div class="subnav-link">Submenu1.3</div>
</div>
<!-- CONTENT ELEMENTS -->
<div class="contentimagesandtext">
<div class="item"><!-- Content Element 1 of Menu 1 --></div>
<div class="item"><!-- Content Element 2 of Menu 1 --></div>
</div>
</div>
<div class="dropdown-overlay topdropdown" id="overlay_5">
<!-- same for Menu 2 -->
</div>
</div>
Here's my script so far:
lib.menuOverlay = HMENU
lib.menuOverlay{
1 = TMENU
1.expAll = 1
1.NO.doNotShowLink = 1
1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
1.NO.wrapItemAndSub.insertData = 1
# Append Content Elements to stdWrap2
1.NO.stdWrap2.append = CONTENT
1.NO.stdWrap2.append {
table = tt_content
select {
pidInList.stdWrap.data = field:uid
}
wrap = <div class="contentimagesandtext">|</div>
renderObj.stdWrap.wrap = <div class="item">|</div>
}
2 = TMENU
2.insertData = 1
2.wrap = <div class="subnav-block">|</div>
2.NO.wrapItemAndSub = <div class="subnav-link">|</div>
}
I tried adding the append to wrapItemAndSub. This will put the content elements after the submenus, but then I don't have a wrapper keeping them togehter.
Note that I need the Level-1 Page UID in the id tag of the wrapper
Question: How can I force the append to be AFTER the items, or alternatively, how can I add a wrapper around my wrapItemsAndSub, containing the parent UID?

Answer 1

you should care for your wraps.
you use stdWrap2 where you append your content. The append wraps the wrap-string of stdWrap2(which is empty), leaving the append the only value for stdWrap2.
now stdWrap2 has no marker where to split the wrap in before and after. So everything goes before the wrapped content. You need a split-marker in stdWrap2:
stdWrap2 = |
stdWrap2.append = ...
on the other side: you could use append as the only wrapping to get its value after the content.

Answer 2

Inspired by this answer, I managed to do what I need.
I append a COA to my first level menu, and put there the CONTENT and another HMENU with the sub-menu items, like this:
lib.menuOverlay = HMENU
lib.menuOverlay {
1 = TMENU
1.expAll = 1
1.NO.doNotShowLink = 1
1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
1.NO.wrapItemAndSub.insertData = 1
1.NO.stdWrap2.append = COA
1.NO.stdWrap2.append {
10 = HMENU
10 {
special = directory
special.value.data = field:uid
1 = TMENU
1.insertData = 1
1.wrap = <div class="subnav-block">|</div>
1.NO.wrapItemAndSub = <div class="subnav-link">|</div>
}
20 = CONTENT
20 {
table = tt_content
select {
pidInList.stdWrap.data = field:uid
}
wrap = <div class="contentimagesandtext">|</div>
renderObj.stdWrap.wrap = <div class="item">|</div>
}
}
}