javascript - Bootstrap 3.0 : How to make vertical navbar dropdown not append to only last list item?

Question

所以我有一个我一直放在一起的面板布局，它有一个漂亮的垂直导航栏。我已经正确对齐了所有内容，而且我已经成功地让下拉菜单以垂直方式出现，但是，由于某种原因，它总是附加到列表中的最后一项。我不明白为什么要这样做。

我已经在下面发布了我的所有代码，并且根据之前对仅显示菜单的初始问题的研究，我相信我的 css 是正确的，所以我想知道这是否可能是 javascript 问题在 boostrap 方面，但我目前没有在侧面菜单中使用 javascript。

CSS

/************
* side navbar
*************/
#side-nav{
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}
.nav-stacked{
    height: 100%;
    width: 100%;
    background: #3B3B3B;
    overflow-x: visible;
    overflow-y: hidden;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
  font-size: 14px;
  padding-left: 4px;
  display: block;
  text-align: center;
}

.nav-stacked > li > a > span{
  font-size: 36px;
  display: block;
  text-align: center;
}

.nav-pills > li > a{
  border-radius: 0;
  padding-top: 15px;
}

.nav-pills > li.active > a{
  background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
  background: linear-gradient(#4B4B4B, #3B3B3B);
  color : #e5e5e5;
}

.nav-pills > li:last-child:not(.active) > a{
  border-bottom: solid 1px #353535; 
}

.nav-pills > li:not(.active) > a:hover{
  background: linear-gradient(#ffffff, #CACCCB);
  color : #333;
}

.nav-stacked > li+li{
  margin-top: 0;
}

#side-nav li.active.open, #side-nav li:not(.active).open{
    position: static;
}

#side-nav .dropdown-menu{
    overflow-x: visible;
    width: 100% !important;
    margin: -92px 0 0 100%;
    border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
    font-size: 14px;
    position: absolute;
    top: 36px;
    left: 85%;
}

html

<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
  <ul class='nav nav-pills nav-stacked'>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        <span class='glyphicon glyphicon-user'></span>
        <p>Driver</p>
        <span class='glyphicon glyphicon-chevron-right'></span>
      </a>
      <ul class='dropdown-menu'>
        <li><a href="/">EXPIRATIONS</a></li>
        <li><a class='clinic' href="#">CLINICS</a></li>
        <li><a class='drugTest' href="#">DRUG TESTING</a></li>
        <li><a href="/recruiting">RECRUITING</a></li>
      </ul>
    </li>
    <li>
      <a href="/comcheck">
        <span class='glyphicon glyphicon-list-alt'></span>
        <p>Comcheck</p>
      </a>
    </li>
    <li>
      <a href="/equipment">
        <span class='glyphicon glyphicon-wrench'></span>
        <p>Equipment</p>
      </a>
    </li>
  </ul>
</nav>

我有一个工作 fiddle 来证明我的问题是什么:

https://jsfiddle.net/ye1q4wfu/4/

我想让它做的就是，当我单击具有下拉列表的列表项时。我希望下拉菜单出现在它旁边。

Answer 1

只需将下拉列表的顶部设置为 top: auto;

#side-nav .dropdown-menu {
  top: auto;
}

https://jsbin.com/fukujazuko/

我的互联网在使用 jsfiddle 时遇到了一些问题