Open sub-menu without creating empty space

Question

I've tried to solve my problem, but the answers did not solve my specific problem.

When the sub-menu expands, empty space shows up, although the sub-menu is placed on the left of the dropdown-menu.

I've embedded the code of my navbar here: 'jsfiddle.net/nickiname/Lds2bkuv/'

<!-- Fixed navbar -->

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">


    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

        <span class="icon-bar"></span></button>

    <a class="navbar-brand" href="index.html"><img src="images/logo2.png" alt="Lichtenberg Europaschule"></a>

    <div class="navbar-collapse collapse navbar-responsive-collapse">

      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>       

        <li><a href="#eltern">Eltern</a></li>

        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Schüler <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Aktuelles</li>

            <li><a href="dateien/vertretungsplan.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span> Vertretungsplan</a></li>

            <li><a href="dateien/klausurenplan.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span> Klausurenplan</a></li>

          <!--Dropdown-Submenu-->
          <li class="dropdown-submenu">

         <a href="#" id="Stundenpläne" class="dropdown-toggle" data-toggle="dropdown">Stundenpläne <span></span></a>


          <ul class="dropdown-menu dropdown-submenu unstyled" role="menu">

            <li class="dropdown-header">Sekundarstufe I</li>
            <li><a href="#Stundenpläne">1</a></li>
            <li><a href="#Stundenpläne">2</a></li>
            <li><a href="#Stundenpläne">3</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Sekundarstufe II</li>
            <li><a href="#Stundenpläne">1</a></li>
            <li><a href="#Stundenpläne">2</a></li>

          </ul>

          </li><!--/.Dropdown-Submenu-->  


            <li><a href="https://www.facebook.com/pages/SV-Luo-Darmstadt/170279079649692?fref=ts" target="_blank">SV</a></li>

          <li class="divider"></li>
          <li class="dropdown-header">Häufig benutzt</li>

            <li><a href="lehrerliste.html">Lehrerliste</a></li>
            <li><a href="#">Virtuelles ...</a></li></!--/.dropdown-submenu--></!--dropdown-submenu--></ul></li></ul></div></div></div></!-->

Also here are some pictures since I am using Bootstrap-classes, which I am not able to embed there.

Dropdown (unopened): https://www.dropbox.com/s/9ykv61sjwd8bnfd/Bildschirmfoto%202015-05-25%20um%2021.58.13.png?dl=0

Dropdown (opened): https://www.dropbox.com/s/nz19ofk846vl9o1/Bildschirmfoto%202015-05-25%20um%2021.58.33.png?dl=0

Thanks a lot for your time!

Answer 1

You can try "position:absolute" inside .dropdown-submenu>.dropdown-menu, in your css code.

.dropdown-submenu>.dropdown-menu{
  position:absolute;
  top:0;
  left:-100%;
  max-width:160px;
  margin-top:-6px;
  margin-left:35px;
}