Question

我需要创建一个onshover弹出菜单，看起来应该是这样的：

我的一位同事已经为我们的默认模板准备了一些东西，它在该模板中完美运行。但是，我必须改变影响弹出菜单的方式，因为我现在的那个看起来像这样：

所以，不是真的，我在寻找什么。这是弹出窗口的（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上复制它，如果我可以花点时间的话。在那之前，任何想法？

修改

我能够在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：我希望有人能给你更好的回答

弹出窗口没有正确显示（也许是flexbox问题）

2 个答案: