打开子菜单而不创建空 space

Question

我已尝试解决我的问题，但答案并未解决我的具体问题。

当子菜单展开时，空 space 出现，尽管子菜单位于下拉菜单的左侧。

我在此处嵌入了我的导航栏代码： '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></!-->

这里还有一些图片，因为我正在使用 Bootstrap-类，我无法将其嵌入那里。

下拉菜单（未打开）：https://www.dropbox.com/s/9ykv61sjwd8bnfd/Bildschirmfoto%202015-05-25%20um%2021.58.13.png?dl=0

下拉菜单（已打开）： https://www.dropbox.com/s/nz19ofk846vl9o1/Bildschirmfoto%202015-05-25%20um%2021.58.33.png?dl=0

非常感谢您的宝贵时间！

Answer 1

您可以在您的 css 代码中尝试 "position:absolute" inside .dropdown-submenu>.dropdown-menu。

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

打开子菜单而不创建空 space

Open sub-menu without creating empty space

html

css

submenu

twitter-bootstrap

drop-down-menu