弹出无法正确显示（也许Flexbox的问题）

我需要创建一个onHover选项弹出菜单应该是这个样子：弹出无法正确显示（也许Flexbox的问题）

我的一位同事已经准备东西给我们的默认模板，并将其在该模板中完美工作。不过，我一定是改变沿影响弹出菜单的方式什么的，因为我有在目前看起来是这样的：

所以，不是真的，我要找的。下面是弹出的（多个）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

来源

2017-02-15 Patrick Manser

尝试codepen.io或jsbin创建实例.com，所以我们可以帮助你更好 – melanholly

@melanholly查看编辑:) –

@PatrickManser它似乎与你试图不在你的弹出菜单上设置绝对位置。通过您尝试实现的布局，您无需完全设置主导航。如果你注释掉：代码不是选择器部分，你会看到它开始表现得更加正常。 – Alsh

删除以下块将显示不正确停止菜单：

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

来源

2017-02-15 10:43:32 Alsh

了一会儿，我问谷歌这件事斗争之后这样回答这附近的人想出了Is it possible to have a child element behind his parent element with z-index

我建议移动导航项目分离元件的.main-header-inner外面比使用JavaScript切换它们。其他选项是让它们出现在某个容器中的投影之后。

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

PS：我希望有人给你更好的答案，这一个

来源

2017-02-15 10:12:02 melanholly

谢谢，我找到了解决方案。整个'。nav：not（）'部分是不必要的，我定位了主导航和顶部导航'relative'。之后，我只需要定位两个导航，飞出就表现正确。 –

弹出无法正确显示（也许Flexbox的问题）

回答

相关问题