Bootstrap 3子菜单水平布局未出现在下拉列表下方

Question

我有test site setup here.

我希望我的导航最终看起来像这样，（抱歉低分辨率）      

目前正在玩检查员并将其更改为显示：内联块子菜单似乎向上跳到左侧。以及不显示内联。

我能够以显示内联显示它：inline-flex但是仍然向上和向左显示。

我目前正在使用wp_nav_menu来显示导航栏，因此可以在wpadmin内对其进行控制。这是它的HTML代码。

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

导航栏的CSS。

/***********************************/
/* 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

更改

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

到

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