Javascript Bootstrap3.0：如何使垂直导航栏下拉列表不只是附加到最后一个列表项？

所以我有一个面板布局，我一直在扔在一起，它有一个奇特的垂直导航栏。我已经把它正确地对齐了，并且我已经成功地获得了一个垂直显示的下拉菜单，但是，由于某些原因，它总是附加到列表上的最后一项。我不明白它为什么这样做

我已经在下面发布了我所有的代码，根据之前关于只显示菜单的初始问题的研究，我相信我的css是正确的，所以我想知道boostrap端是否存在javascript问题，但我目前没有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>

我有一把小提琴来演示我的问题：

---

我想让它做的就是，当我点击有下拉列表的列表项时。我希望下拉列表显示在它旁边。

使用子菜单显示在项目前面的以下CSS代码

#side-nav .dropdown-menu{
    overflow-x: visible;
    width: 100% !important;
    margin: -290px 0 0 100%;
    border-radius: 0;
}

---

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

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

---

我的互联网在JSFIDLE上遇到了一些问题

如果您不介意使用一点JQuery，我认为这可以解决问题：

$('.dropdown-menu').each(function() {
    $(this).css('top', $(this).closest('li').css('top'));
});

您还需要更改CSS的一行：

#side-nav .dropdown-menu{
    overflow-x: visible;
    width: 100% !important;
    //margin: -92px 0 0 100%; /* Removed */
    margin: 0 0 0 100%; /* Added */
    border-radius: 0;
}

---

我已将

clearfix

类添加到

li

元素中，您的下拉菜单位于该元素中。然后，将这些属性添加到

下拉菜单

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

并添加了以下css规则：

#side-nav .dropdown-toggle {
  float: left;
  width: 100%;
}

这是包含更改的完整代码段。显示代码片段时，请单击“完整页面”查看结果

#侧导航{
身高：100%；
左侧填充：0；
右边填充：0；
}
.导航堆叠{
身高：100%；
宽度：100%；
背景：#3b3b；
溢出x：可见；
溢出y：隐藏；
保证金底部：-99999像素；
填充底部：99999像素；
}
.nav叠加>li>a>p{
字体大小：14px；
左侧填充：4px；
显示：块；
文本对齐：居中；
}
.nav叠加>li>a>跨度{
字体大小：36px；
显示：块；
文本对齐：居中；
}
.nav药丸>li>a{
边界半径：0；
填充顶部：15px；
}
.nav药丸>li.active>a{
背景：线性梯度（#3434，#000000）；
}
.nav药丸>li:未（.active）>a{
背景：线性梯度（#4b4b，#3b3b）；
颜色：#E5；
}
.nav药丸>李：最后一个孩子：未（.active）>a{
边框底部：实心1px 3535；
}
.nav药丸>li:未（.active）>a:悬停{
背景：线性梯度（#ffffff，#CACCCB）；
颜色：#333；
}
.nav叠加>li+li{
边际上限：0；
}
#侧导航li.active.open，#侧导航li:not（.active）.open{
位置：静态；
}
#侧导航下拉菜单{
溢出x：可见；
宽度：100%！重要；
利润率：0.100%；
边界半径：0；
顶部：自动；
浮动：对；
}
#侧导航下拉开关{
浮动：左；
宽度：100%；
}
.下拉切换.右侧字形图标V形{
字体大小：14px；
位置：绝对位置；
顶部：36px；
左：85%；
}

JS-Bin

这个答案只有在我有一个下拉菜单的情况下才有用。这需要是一个适用于任意数量下拉菜单的全局设置。另外，它是-276px而不是-290px，因为它是根据按钮的高度计算出来的。我想问一下，在你发布之前，你至少要用提琴测试一下，从长远来看，它只会帮助我，因为它对其他人都有帮助，所以我们知道什么更好用，什么不好用。继续。。。这将它与活动下拉菜单的底部对齐，因此它很接近，但不是解决方案。我不知道您是否尝试过，因为它在我这边有效（我无法打开JSFIDLE）。您的答案实际上是最有效的，也是唯一正确的答案。我只是在边距

margin:-92px 0 100%上把它改成了这个