Bootstrap 3.0: How to make vertical navbar dropdown not append to only last list item?
<p>So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this. </p>

<p>I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu. </p>

<p><strong>CSS</strong></p>

<pre><code>/************
* 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 &gt; li &gt; a &gt; p{
  font-size: 14px;
  padding-left: 4px;
  display: block;
  text-align: center;
}

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

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

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

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

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

.nav-stacked &gt; 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%;
}
</code></pre>

<p><strong>html</strong></p>

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

<p>I have a working fiddle to demonstrate what my issue is:</p>

<p><a href="https://jsfiddle.net/ye1q4wfu/4/" rel="nofollow">https://jsfiddle.net/ye1q4wfu/4/</a></p>

<p>All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.</p>