TYPO3 - TypoScript TMENU ACT-object before NO-object - twitter-bootstrap-3

Question

I'm trying to find out how to put a TMENU: .ACT-object before a TMENU: .NO-object, since I'm trying to achieve a Bootstrap 3.3.7 dropdown menu structure with the active item as leading <li>-element.
Currently I'm stuck on this part and I hope anyone can get me started to finish this structure. The structure I'm trying to achieve is the following:
<ul class="nav navbar-nav navbar-right pull-right" role="menu">
<li class="dropdown language-menu lang eng">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>English</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="lang fr"><span>Français</span></li>
<li class="lang de><a><span>Deutsch</span></a></li>
<li class="lang es><a><span>Español</span></a></li>
<li class="lang pt><a><span>Portugues</span></a></li>
<li class="lang nl><a><span>Nederlands</span></a></li>
</ul>
</li>
</ul>
The only thing that goes wrong at the moment, is that the TMENU .ACT-object is appending the TMENU: .NO-object. It is being put insite the <ul class="dropdown-menu">-element.
The TypoScript I am using:
20 = HMENU
20 {
special = language
special.value = 0,1,2,3,4,5
current = 1
wrap = <ul class="nav navbar-nav navbar-right pull-right" role="menu">|</ul>
1 = TMENU
1 {
wrap = <ul class="dropdown-menu">|</ul>
NO = 1
NO {
allWrap = <li class="lang eng">|</li> || <li class="lang nl">|</li> || <li class="lang fr">|</li> || <li class="lang de">|</li> || <li class="lang es">|</li> || <li class="lang pt">|</li>
ATagParams =
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
#ACT < .NO
ACT = 1
ACT {
allWrap = <li class="dropdown language-menu lang eng">|</li>
}
}
}
I have tried a lot the last two days and I'm hoping anyone can help me out, or at least get me started so I know where my mistakes are.
Thanks a lot!

Answer 1

in general ACT is put inline amongst the NO menu items. to split it up so you have the ACT separated in front of the other NO items you need to render the menu two times: first only the ACT item(s) followed by the NO items.
as you want to have one UL-tag around it I would try a COA with that UL-wrap and then two menus where the first one only renders ACT with their LI-wrap and the second only the NO with their LI-wrap.
20 = COA
20 {
wrap = class="nav navbar-nav navbar-right pull-right" role="menu">|</ul>
10 = HMENU
10 {
special = language
special.value = 0,1,2,3,4,5
current = 1
1 = TMENU
1 {
ACT = 1
ACT.allWrap (
<li class="dropdown language-menu lang eng">|</li> ||
<li class="dropdown language-menu lang nl">|</li> ||
<li class="dropdown language-menu lang fr">|</li> ||
<li class="dropdown language-menu lang de">|</li> ||
<li class="dropdown language-menu lang es">|</li> ||
<li class="dropdown language-menu lang pt">|</li>
)
NO.doNotShowLink = 1
}
}
20 < .10
20 {
ACT.doNotShowLink = 1
NO >
NO = 1
NO {
allWrap (
<li class="lang eng">|</li> ||
<li class="lang nl">|</li> ||
<li class="lang fr">|</li> ||
<li class="lang de">|</li> ||
<li class="lang es">|</li> ||
<li class="lang pt">|</li>
)
ATagParams =
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
}

Answer 2

Based on Bernd Wilke's answer this is what finally worked for me:
lib.menuLanguage = COA
lib.menuLanguage {
10 = HMENU
10 {
special = language
special.value = 0,1
1 = TMENU
1 {
ACT = 1
ACT {
linkWrap = <li class="extra">| <b class="caret"></b><ul class="dropdown-menu">
doNotLinkIt = 1
stdWrap {
override = EN || DE
}
}
NO = 1
NO.doNotShowLink = 1
}
}
20 < .10
20.1 {
ACT >
NO >
NO = 1
NO {
doNotLinkIt = 1
linkWrap = <li>|</li>
stdWrap {
override = EN || DE
typolink {
parameter.data = page:uid
additionalParams = &L=0 || &L=1
ATagParams = hreflang="en-GB" || hreflang="de-DE"
addQueryString = 1
addQueryString.exclude = L,id,no_cache
addQueryString.method = GET
no_cache = 0
}
}
}
}
wrap = |</ul></li>
}
with this template:
<ul class="nav navbar-nav navbar-right">
<f:cObject typoscriptObjectPath='lib.menuLanguage' />
</ul>