Sub menu dropdown items force to top of list

Question

I have a bootstrap dropdown menu with a list of 5 parent links when you hover over them they open up a sub-menu this is all working properly however the main problem I am running into is that I want the second tier link dropdown to be forced to the top of the list instead of adjacent to the current expanded item

I have tried setting top:0; but it seems it will only work relative to the div it is in.

If you look at the code I explain it a little bit more clearly

I have a CodePen as well as the snippet below

<div class="dropdown">
  <a class="dropdown-toggle" type="button" id="department-nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    ALL DEPARTMENTS
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="department-nav-dropdown">
    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> This is correct</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This is correct</a></li>
        <li><a href="#">This is correct</a></li>
        <li><a href="#">This is correct</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
            <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
            <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
            <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

Answer 1

An absolutely positioned element will be positioned relative to it's closest non-static positioned ancestor. You have position: relative on the li that is the parent of the nested submenu - if you want the submenus to be top: 0 relative to the parent menu (instead of the li) remove position: relative from the li (.dropdown-submenu{position:relative;})

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  border-radius: 6px 0 6px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <a class="dropdown-toggle" type="button" id="department-nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    ALL DEPARTMENTS
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="department-nav-dropdown">
    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> This is correct</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This is correct</a></li>
        <li><a href="#">This is correct</a></li>
        <li><a href="#">This is correct</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
		    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
		    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
		    <li class="dropdown-submenu">
      <a class="clearfix">
        <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div>
        <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </a>
      <ul class="dropdown-menu dropdown-menu--sub">
        <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li>
        <li><a href="#">Second level</a></li>
        <li><a href="#">Second level</a></li>
      </ul>
    </li>
  </ul>
</div>