Bootstrap 3.0：如何使垂直导航栏下拉菜单不仅附加到最后一个列表项？

Question

我有一个面板布局，其中包含一个漂亮的垂直导航栏。我已经正确对齐了它，并成功地使下拉菜单以垂直方式出现，但是由于某种原因，它总是添加到列表中的最后一项。我不明白为什么会这样做。

我在下面发布了所有的代码，并且从之前关于如何显示菜单的研究来看，我相信我的css是正确的，所以我想知道是否可能是bootstrap方面的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>

我有一个可工作的示例来演示我的问题： https://jsfiddle.net/ye1q4wfu/4/ 我想要做的就是，当我点击带有下拉列表的列表项时，我希望下拉列表出现在它旁边。

- Mark Hill

Answer 1

只需将下拉菜单的顶部设置为top: auto;

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

https://jsbin.com/fukujazuko/

我的网络在使用jsfiddle时出现了一些问题。

- Danish Iqbal

---

在你发布前，我建议你先使用fiddle测试一下，这有助于我们长远的考虑，也方便其他人知道什么方法更好，什么方法不行。接下来... 这个代码将其对齐到活动下拉菜单的底部，所以它很接近解决方案，但不是最终的解决方案。 - Mark Hill

我不知道你是否尝试过这个，因为在我这边它是正常工作的（我无法打开jsfiddle）https://jsbin.com/fukujazuko/ - Danish Iqbal

Answer 2

如果您不介意使用一点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;
}

Demo Here

- Tricky12

---

你的答案实际上是最有效和唯一正确的。我只是在边距上进行了更改 margin: -92px 0 0 100%;，无论我有多少下拉菜单，它都可以正确对齐。非常感谢！ - Mark Hill

没问题！也许有一种更简单的使用CSS的方法，但是在这么少的JQuery情况下，我认为它不会更高效（如果有的话）。 - Tricky12

Answer 3

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

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

- Maihan Nijat

---

这个答案仅适用于我只有一个下拉菜单的情况。这需要是一个全局设置，适用于任意数量的下拉菜单。此外，它是-276px而不是-290px，因为它是从按钮的各自高度计算出来的。 - Mark Hill

Answer 4

我已经在你的下拉菜单所在的 li 元素中添加了 clearfix 类。然后，将这些属性添加到 dropdown-menu 中。

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

并添加了这个CSS规则：

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

这是带有更改的完整代码片段。在显示代码片段时，请单击“全屏”以查看结果。

#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: 0 0 0 100%;
 border-radius: 0;
    top: auto;
    float: right;
}

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

.dropdown-toggle .glyphicon-chevron-right{
 font-size: 14px;
 position: absolute;
 top: 36px;
 left: 85%;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
  <ul class='nav nav-pills nav-stacked'>
    
    <li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
      <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="/comcheck">
        <span class='glyphicon glyphicon-wrench'></span>
        <p>Equipment</p>
      </a>
    </li>
  </ul>
</nav>
</body>
</html>

- Julio Betta