Bootstrap 3 nav sub menu li-tag overflows into following submenu

That is my codepen: http://ift.tt/1KUX5ii

Its about a nav bar which behaves responsive. But I have custom features inside the ul-li menu. Each li.dropdown has TWO hyperlinks being horizontal so I floated them. That looks fine for bootstrap 3 resolutions SM, MD and LG.

But for the lowest XS resolution the the li-tags with the TWO hyperlinks must linebreak so I gave them display:block which did not work, but when I set a height of 50px then it works...

My real problem for NOW is when I click on the 2nd hyperlink (dropdown arrow/caret) then the ul-menu opens but it overflows into the following li.dropdown tags.

Why is that, how can I fix that? What I want is to open the submenu (ul-tag) and the other li.dropdown-tags must move down.

See this screenshot:

<div class="navbar navbar-inverse">   

        <div id="navbar-header" class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar" aria-expanded="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <ul class="nav navbar-nav navbar-right hidden-lg hidden-md hidden-sm )">
        <li><a href="/Account/RegisterUser" id="registerLink">Registrieren</a></li>
        <li><a href="/LogOn" id="loginLink">Anmelden</a></li>
    </ul>

        </div>

        <div class="navbar-collapse collapse in" id="main-navbar" aria-expanded="true">

            <ul class="nav navbar-nav">

                <li class="dropdown open">
                    <a href="/Navigation/MyDevices">Meine Geräte</a>
                    <a id="drop_refrigerators" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop_refrigerators">
                        <li role="presentation"><a href="/Devices/test" role="menuitem">Geräteübersicht</a></li>
                        <li role="presentation"><a href="/Devices/test" role="menuitem">Geräte-Registrierung</a></li>
                        <li role="presentation"><a href="/Devices/RegisterSmartDeviceBox" role="menuitem">SmartDeviceBox-Registrierung</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="/Navigation/Service">Service</a>
                    <a id="drop_service" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop_service">
                        <li role="presentation"><a href="/WarrantyPlus/WarrantyPlus" role="menuitem">GarantiePlus</a></li>
                        <li role="presentation"><a href="/CustomerService/Request" role="menuitem">Kundendienst</a></li>

                    </ul>
                </li>


                <li class="dropdown">
                    <a href="/Navigation/Configuration">Konfiguration</a>     

                    <a id="drop_configuration" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop_configuration">
                        <li role="presentation"><a href="/Configuration/CustomerData" role="menuitem">Kundendaten</a></li>
                        <li role="presentation"><a href="/Configuration/Notifications" role="menuitem">Benachrichtigungen</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" style="float:left">..::TEST::..</a>
                    <a id="drop_test" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop_test">
                        <li role="presentation"><a href="/TestHelper" role="menuitem">Test Helper</a></li>
                        <li role="presentation"><a href="/Account/RegisterCustomerServiceRepresentative" role="menuitem">Register Customer Service Representative</a></li>
                    </ul>
                </li>

            </ul>
                <ul class="nav navbar-nav navbar-right hidden-xs )">
        <li><a href="/Account/RegisterUser" id="registerLink">Registrieren</a></li>
        <li><a href="/LogOn" id="loginLink">Anmelden</a></li>
    </ul>

        </div>



</div>

* {
  margin: 0;
}
html,
body {
  font-family: "HelveticaNeueW01-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100%;
  min-height: 100%;
  font-size: 12px;
  font-weight: 400;
}
a:link,
a:active,
a:visited,
a:hover,
a:focus {
  color: black;
}

.navbar {
  border: none;
  margin-bottom: 0;
}
.navbar > .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar > .container > .navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: underline;
  background-color: white;
} 

#navbar-header {
  margin-left: 15px;
}
@media all and (max-width: 768px) {
  #navbar-header > ul > li {
    float: left;
  }
  #main-navbar > ul > li.dropdown {
    height: 50px;
    display: block;
    border: 1px solid blue;
  }
  #main-navbar a[role="menuitem"] {
    color: white;
    line-height: normal;
    padding: 8px 10px 8px 10px;
  }
  #main-navbar li[role="presentation"] {
    padding-left: 15px;
  }
  #main-navbar > ul > li a:first-child {
    background: yellow;
  }
  #main-navbar > ul > li.dropdown > a:first-child {
    float: left;
    background: green;
  }
  #main-navbar > ul > li.dropdown a[role=button] {
    float: left;
    width: 30px;
    background: orange;
  }
}
@media all and (min-width: 768px) {
  #main-navbar > ul > li > a.dropdown-toggle {
    /*Patricks changes: On smaller screens the menu items must be horizontal*/
    float: left;
    width: 30px;
    text-align: center;
  }
  #main-navbar > ul > li.dropdown > a:first-child {
    float: left;
    background: red;
  }
}
#navbar-header > ul > li > a:hover,
> a:focus {
  background-color: orange;
  color: blue;
}
/* When on SM resolution the dropdown is opened the style seems overriden by someone.*/

#main-navbar,
#navbar-header {
  border: none;
  color: white;
  font-size: 21px;
  font-family: "HelveticaNeueW01-57Cn", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#main-navbar > ul > li > a,
#navbar-header > ul > li > a {
  line-height: normal;
  text-decoration: none;
  color: white;
  padding: 8px 10px 8px 10px;
}
#main-navbar .dropdown-menu > li > a,
#navbar-header .dropdown-menu > li > a {
  font-size: 21px;
}
#main-navbar #alerts-menu,
#navbar-header #alerts-menu {
  color: white;
}
#main-navbar #alerts-menu ul,
#navbar-header #alerts-menu ul {
  min-width: 400px;
  color: black;
}
#main-navbar #alerts-menu .alert,
#navbar-header #alerts-menu .alert {
  margin-top: 5px;
  margin-bottom: 5px;
}
#main-navbar #alerts-menu .alert:not(:last-child),
#navbar-header #alerts-menu .alert:not(:last-child) {
  border-bottom: solid 1px #777777;
}
#main-navbar #alerts-menu .errormessage,
#navbar-header #alerts-menu .errormessage {
  padding: 5px;
  color: #a94442;
  font-size: 12px;
}
#main-navbar #alerts-menu .refrigerator-name,
#navbar-header #alerts-menu .refrigerator-name {
  float: left;
  padding: 5px;
  font-size: 21px;
}
#main-navbar #alerts-menu .customer-link,
#navbar-header #alerts-menu .customer-link {
  float: right;
  padding: 5px;
  font-size: 15px;
}