Why is this bootstrap dropdown not working properly?

Question

I'm working with the DDR Menu of DotNetNuke. I'm using it on this page: http://lumenis.bondtest.nl/Aesthetic

The menu on the bottom is the ddr menu.

For some reason, the dropdown menu is not getting between the li's, but on top of them.

I'm using this code:

    <nav class="navbar navbar-default lumenisInnerMenu">
    <div class="container-fluid">
        <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        </div>
        <div class="collapse navbar-collapse lumenisListItems" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                [*>NODE]
            </ul>
        </div>
    </div>
</nav>

[>NODE]
    <li class="[?SELECTED]dir current[/?][?NODE]HasChildren dropdownmenu [/?]">
    [?ENABLED]
        <a [?!NODE] href="[=URL]" [/?] [?TARGET]target="[=TARGET]"[/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="collapse" data-target="#[=ID]">
            <span>[=TEXT]</span>
        </a>
    [?ELSE]
        <a href="#" [?NODE] [/?]> [?NODE]
            <span>[=TEXT]</span>[/?]
        </a>
    [/?]
    [?NODE]
        <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
            [*>NODE]
        </ul>
    [/?]
    </li>
[/>]

Does anybody have any idea what I'm doing wrong?

Thanks in advance.