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

Question

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.

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.

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>

I have a working fiddle to demonstrate what my issue is:

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

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.

Answer 1

Just set the top of dropdown to top: auto;

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

https://jsbin.com/fukujazuko/

My internet has some trouble with jsfiddle

Answer 2

If you don't mind using a bit of JQuery, I think this will do the trick:

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

You will also need to change one line of your 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

Answer 3

Use the following CSS code that the sub-menu appears in front of the item.

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

Answer 4

I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu

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

And added this css rule:

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

This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.

 #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>