Bootstrap 3 sub menu horizontal layout not appearig below the dropdown

Question

I have a test site setup here.

I would like my navigation to eventually look like this, (Sorry for low resolution)

Currently when playing around with the inspector and I change it to display: inline-block the submenu seems to jump up and to the left. As well as not displaying inline.

I have been able to display it inline with display: inline-flex but that still goes up and to the left.

I am currently using wp_nav_menu to display the navbar so it can be controlled from within wpadmin. This is the HTML code for it.

<div class="navbar navbar-static" role="navigation">
  <div class=""> <!-- This used to have container. -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">

      <!-- This is where the menu set up will be -->
    <?php
      $args = array(
          'menu'  => 'header_menu',
          'menu_class'  => 'nav navbar-nav nav-justified',
          'menu_id' =>  'test',
          'container'  => 'false',
          'before' => '',
          'link_after' => ''

        );
      wp_nav_menu( $args );
    ?>

    </div><!--/.navbar-collapse -->
  </div>
</div>

And the CSS for the Navbar.

/***********************************/
/* Display on hover effects on nav */
/***********************************/
.navbar-nav.nav-justified > li{
    float:none;
}
.admin-bar .navbar-fixed-top {
    margin-top: 32px;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-toggle {
    background-color: #550015;
    float: left;
    margin-left: 15px;

}

/*This is the stuff in the dropdown nav*/
@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: white;
        padding: 10px 15px;
        width: 200px;       
    }

    li:hover .sub-menu {
        display: block;
    }
    .nav>li>a {
        /*padding: 10px 70px;*/
        color: black;
    }

}


/*On hover colour*/
.nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent;
}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu a  {
    color: #000;
}

/*On Hover link*/
.sub-menu a:hover  {
    color: #000;
    text-decoration: none;  
}   

.current-menu-item > a, .current-menu-parent > a {
    background: transparent;    
}
.current-menu-parent li a {
    background: inherit;
}

/*On hover nav menu*/
.nav-justified a:after {
  clear: both;
  display: block;
  content: "";
  position: relative;
  width: 0;
  left: 50%;
  height: 2px;
  background: rgba(0, 0, 0, 0.56);
  -webkit-transition: width 0.2s, left 0.2s;
  -moz-transition: width 0.2s, left 0.2s;
  -o-transition: width 0.2s, left 0.2s;
  transition: width 0.2s, left 0.2s;
  border-radius: 1px;
}
.nav-justified a:hover:after, .nav-secondary a:focus:after {
  width: 100%;
  left: 0;
}

Answer 1

Change

li:hover .sub-menu {
    display: block;
}

to

li:hover .sub-menu {
    display: flex;
}