выпадающей не показывая должным образом (возможно Flexbox проблемы)

Question

мне нужно создать onhover плавающем меню, которое должно выглядеть примерно так:

Мой коллега уже подготовил кое-что для нашего шаблона по умолчанию, и это отлично работает в этом шаблоне. Однако, должно быть, я что-то изменилось по пути, который влияет на всплывающее меню, потому что один у меня есть на данный момент выглядит следующим образом:

Таким образом, на самом деле не то, что я ищу. Здесь (s) 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> 

Единственное место, где я изменить нав элемент из сферы @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 или так, если я могу сделать некоторое время для этого. До тех пор любые идеи?

EDIT

я смог воссоздать его в 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

После борьбы за некоторое время я спросил Google об этом, так что ответ пришел из здесь Is it possible to have a child element behind his parent element with z-index

Я хотел бы предложить перемещение элементов навигации к отделенной элементу за пределами .main-header-inner, чем для переключения с помощью javascript. Другие варианты включают их появление после тени в каком-либо контейнере.

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

PS: Я надеюсь, что кто-то дает вам лучший ответ на этот один