彈出無法正確顯示（也許Flexbox的問題）

Question

我需要創建一個onHover選項彈出菜單應該是這個樣子：

我的一位同事已經準備東西給我們的默認模板，並將其在該模板中完美工作。不過，我一定是改變沿影響彈出菜單的方式什麼的，因爲我有在目前看起來是這樣的：

所以，不是真的，我要找的。下面是彈出的（多個）CSS代碼：

.flyout { 
    position: static !important; 
    .flyout-menu { 
    position: absolute; 
    background: $flyout-background; 
    left: 0; 
    top: 80px; 
    width: 100%; 
    height: auto; 
    opacity: 0; 
    visibility: hidden; 
    transition: visibility $animation-base, opacity $animation-base; 
    z-index: 1; 
    display: flex; 
    flex-wrap: nowrap; 
    flex-direction: row; 
    .nav { 
     flex-direction: column; 
     .nav-item { 
     background: $flyout-background; 
     } 
    } 
    } 
} 

.flyout:hover { 
    .flyout-menu { 
    visibility: visible; 
    opacity: 1; 
    } 
} 

下面是HTML部分：

<ul class="nav navbar-nav"> 
    <li class="nav-item flyout"> 
    <a class="nav-link" href="#">Shop <i class="fa fa-chevron-down" aria-hidden="true"></i></a> 
    <div class="flyout-menu"> 
     <div class="col-12 col-lg-4"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li class="nav-item"><a href="#">Schläuche/Zubehör</a></li> 
      <li class="nav-item"><a href="#">Persönliche Ausrüstung</a></li> 
      <li class="nav-item"><a href="#">Retten</a></li> 
      <li class="nav-item"><a href="#">Technische Hilfeleistung</a></li> 
     </ul> 
     </div> 
     <div class="col-12 col-lg-4"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li class="nav-item"><a href="#">Beleuchtung</a></li> 
      <li class="nav-item"><a href="#">Umweltschutz</a></li> 
      <li class="nav-item"><a href="#">Magazineinrichtung</a></li> 
      <li class="nav-item"><a href="#">Dienstleistung/Ausbildungsmaterial</a></li> 
     </ul> 
     </div> 
     <div class="col-12 col-lg-4"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li class="nav-item"><a href="#">Geschenkartikel</a></li> 
      <li class="nav-item"><a href="#">Brandschutz</a></li> 
      <li class="nav-item"><a href="#">Hochwasserschutz</a></li> 
     </ul> 
     </div> 
    </div> 
    </li> 
    <!-- ... more menu stuff --> 
</ul> 

其中I修改nav元件出@media範圍的唯一的地方是在這裏，這是不是爲flyout-menu類甚至相關：

.main-header { 
    box-shadow: 0 0 20px #000; 
    position: relative; 
    z-index: 200; 
    background-color: $white-base; 

    &-inner { 
    width: 100%; 
    max-width: $inner-container-narrow; 
    height: $header-inner-height; 
    margin: 0 auto; 
    position: relative; 
    background-color: $white-base; 
    z-index: 10; 

    .nav:not([class="flyout-menu"]) { 
     position: absolute; 
     right: 0; 
     bottom: -20px; 
    } 
    } 
    /* ... */ 
} 

我會嘗試複製它codepen.io左右，如果我可以作一些時間吧。在那之前，有什麼想法？

編輯

我能夠重新創建它在codepen.io。我認爲.flyout-menu代碼是沒問題的，因爲如果單獨使用，沒有其他所有樣式，它就可以工作。所以這真的是我的錯，我把它弄壞了，我找不到，在哪裏。

這裏的筆：http://codepen.io/kerowan/pen/oBVBRq

Answer 1

刪除以下塊將顯示不正確停止菜單：

.nav:not([class="flyout-menu"]) { 
    position: absolute; 
    right: 0; 
    bottom: -20px; 
} 

Answer 2

了一會兒，我問谷歌這件事鬥爭之後這樣回答這附近的人想出了Is it possible to have a child element behind his parent element with z-index

我建議移動導航項目分離元件的.main-header-inner外面比使用JavaScript切換它們。其他選項是讓它們出現在某個容器中的投影之後。

.flyout-menu { 
    // ...... 
    top: 180px; 
    // ...... 
} 

PS：我希望有人給你更好的答案，這一個