Dropdown menu not working Typo3 - typo3

Question

my dropdown menu does not work as I planned it to.
Here
you can find the menu I'm working on.
When I press 'Produkte' there should open a dropdown menu with 2 submenu points.
If I get this dropdown, and these menu points again have submenus, there should be another dropdown. Is this possible ? And if yes, how, I'm quite new to TypoScript..
EDIT: okay i just saw the .. , how can i link this relative, so if I add a new submenu point it will automatically show in there?
Maybe using data-target="dropdown"?
lib.field_topmenu = HMENU
lib.field_topmenu {
1 = TMENU
1 {
wrap = <ul class="nav navbar-nav">|</ul>
expAll = 1
NO = 1
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
IFSUB = 1
IFSUB {
before = <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="dropdown">
after = <b class="caret"></b></a>
doNotLinkIt = 1
wrapItemAndSub = <li class="dropdown">|</li>
ATagTitle.field = title
ATagParams = class="dropdown-toggle" data-toggle="dropdown"
ATagBeforeWrap = 1
}
ACTIFSUB = 1
ACTIFSUB {
before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
after = <b class="caret"></b></a>
# doNotLinkIt = 1
wrapItemAndSub = <li class="dropdown active">|</li>
ATagTitle.field = title
ATagBeforeWrap = 1
}
}
2 = TMENU
2 {
expAll = 1
wrap = <ul class="dropdown-menu">|</ul>
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = |
before = <li class="divider"></li><li class="nav-header">
after = </li>
# doNotLinkIt = 1
ATagTitle.field = title
}
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
IFSUB = 1
IFSUB {
before = <li class="divider"></li><li class="nav-header">
after = </li>
doNotLinkIt = 1
ATagTitle.field = title
}
SPC = 1
SPC {
allWrap = <li class="divider"></li><li class="nav-header">|</li>
}
}
3 = TMENU
3 {
NO {
allWrap = <li>|</li>
ATagTitle.field = title
}
ACT = 1
ACT {
wrapItemAndSub = <li class="active">|</li>
ATagTitle.field = title
}
}

Answer 1

Solved the problem.
lib.field_topmenu = HMENU
lib.field_topmenu {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
wrap = <ul class="nav navbar-nav"> | </ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li class="active">|</li>
}
IFSUB <.NO
IFSUB {
allWrap = <!!==:>|
wrapItemAndSub = <li class="dropdown">|</li>
ATagBeforeWrap = 1
linkWrap = | <b class="caret"></b>
ATagParams = class="dropdown-toggle" data-toggle="dropdown"
}
ACTIFSUB < .IFSUB
ACTIFSUB {
allWrap = <!!==:>|
}
}
2 = TMENU
2 {
wrap = <ul class="dropdown-menu" role="menu" aria-labelledby="dLable">|</ul>
expAll = 1
NO = 1
NO {
allWrap = <li>|</li>
stdWrap.htmlSpecialChars = 1
}
ACT < .NO
ACT.ATagParams = class="active"
ACT.allWrap = <li class="active">|</li>
IFSUB < .NO
IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
IFSUB.linkWrap = | <b class="caret"></b>
IFSUB.ATagBeforeWrap = 1
ACTIFSUB < .IFSUB
ACTIFSUB {
allWrap = <!!==:>|
}
3 = TMENU
3 {
wrap = <ul class="dropdown-menu" role="menu" aria-labelledby="dLable">|</ul>
expAll = 1
NO = 1
NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
ACT < .NO
ACT.ATagParams = class="active"
ACT.allWrap = <li class="active">|</li>
}
}
}
lib.title_banner = IMAGE
lib.title_banner {
file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
}
}

Answer 2

You have to use wrapItemAndSub instead of allWrap if you want to have the <li> tags around the whole submenu.
In general you should first create a working HTML markup and then use TypoScript to generate exactly that markup.