引导程序4导航。多点导航中的z索引

时间：2018-07-26 10:29:13

标签： html5 sass bootstrap-4 z-index

我将Bootstrap 4导航修改为多弹出导航。

html：

<ul class="nav">
  <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Reiseziele</a>
    <div class="dropdown-menu multi-level">
      <ul class="nav flex-column">
        <li class="nav-item NO"><a href="#" class="nav-link">Europa <i class="fal fa-chevron-right fa-xs"></i></a></li>
        <li class="nav-item NO"><a href="#" class="nav-link">Orient <i class="fal fa-chevron-right fa-xs"></i></a></li>
        <li class="nav-item NO"><a href="#" class="nav-link">Afrika <i class="fal fa-chevron-right fa-xs"></i></a></li>
        <li class="nav-item dropdown-submenu IFSUB"><a href="#" class="nav-link">Asien/Ozeanien <i class="fal fa-chevron-right fa-xs"></i></a>
          <div class="dropdown-menu">
            <div class="row">
              <div class="col-2">
                <ul class="nav flex-column">
                  <li class="nav-item NO"><a href="#" class="nav-link">Butan</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">China</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Indien</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Indonesien</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Japan</a></li>
                </ul>
              </div>
              <div class="col-2">
                <ul class="nav flex-column">
                  <li class="nav-item NO"><a href="#" class="nav-link">Kambodscha</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Laos</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Malaysia</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Mongolei</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Myanmar</a></li>
                </ul>
              </div>
              <div class="col-2">
                <ul class="nav flex-column">
                  <li class="nav-item NO"><a href="#" class="nav-link">Nepal</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Neuseeland</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Russland</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Sri Lanka</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Thauland</a></li>
                </ul>
              </div>
              <div class="col-2">
                <ul class="nav flex-column">
                  <li class="nav-item NO"><a href="#" class="nav-link">Tibet</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Turkmenistan</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Usbekiastan</a></li>
                  <li class="nav-item NO"><a href="#" class="nav-link">Vietnam</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item NO"><a href="#" class="nav-link">Mittelamerika <i class="fal fa-chevron-right fa-xs"></i></a></li>
        <li class="nav-item NO"><a href="#" class="nav-link">Südamerika <i class="fal fa-chevron-right fa-xs"></i></a></li>
      </ul>
    </div>
  </li>
  <li class="nav-item NO"><a href="#" class="nav-link">Reisevarianten</a></li>
  <li class="nav-item NO"><a href="#" class="nav-link">So reisen wir</a></li>
</ul>

.nav-item {
        &:hover, &:focus, .active {
            .nav-link {
                background-color: red;
                color: white;
            }
        }
        .nav-link {
            font-weight: 700;
            font-size: 1.125rem;
            padding: .5rem .75rem;
            &:hover, &:focus, .active {
                background-color: red;
                color: white;
            }
        }
        &.dropdown {
            > .dropdown-menu {
                border: 0;
                padding: 0;
                margin: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
                box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
                .nav-item {
                    border-bottom: 1px solid darken(red,15%);
                    &:last-child {
                        border-bottom: 0;
                    }
                    .nav-link {
                        font-size: 1rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: .75rem 1rem;
                        font-weight: normal;
                        background-color: inherit;
                        color: black;
                        white-space: nowrap;
                        &:hover, &:focus, .active {
                            background-color: inherit;
                            color: red;
                        }
                    }
                }
            }
            &:hover {
                > .dropdown-menu {
                    display: block;
                    border: 0;
                }
            }
        }
        &.dropdown-submenu {
            > .dropdown-menu {
                top: 0;
                left: 100%;
                height: 100%;
                margin-top: 0;
                margin-left: 0;
                border: 0;
                padding: 0 15px;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
                box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
                background-color: #efefef;
                .nav-item {
                    border-bottom: 1px solid transparent;
                    &:last-child {
                        border-bottom: 0;
                    }
                }
                > .row {
                    flex-wrap: nowrap;
                }
                [class*="col-"] {
                    min-width: 10rem;
                    padding: 1.55rem 20px;
                }
            }
            &:hover {
                > .dropdown-menu {
                    display: block;
                }
            }
        }
    }

scss：

.nav-item {
 &:hover, &:focus, .active {
  .nav-link {
   background-color: $WIE-default;
   color: $white;
  }
 }
 .nav-link {
  font-weight: 700;
  font-size: 1.125rem;
  padding: .5rem .75rem;
  &:hover, &:focus, .active {
   background-color: $WIE-default;
   color: $white;
  }
 }
 &.dropdown {
  > .dropdown-menu {
   border: 0;
   padding: 0;
   margin: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
   box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
   .nav-item {
    border-bottom: 1px solid darken($mainnav-dropdown-submenu,15%);
    &:last-child {
     border-bottom: 0;
    }
    .nav-link {
     font-size: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .75rem 1rem;
     font-weight: normal;
     background-color: inherit;
     color: $black;
     white-space: nowrap;
     &:hover, &:focus, .active {
      background-color: inherit;
      color: $WIE-default;
     }
    }
   }
  }
  &:hover {
   > .dropdown-menu {
    display: block;
    border: 0;
   }
  }
 }
 &.dropdown-submenu {
  > .dropdown-menu {
   top: 0;
   left: 100%;
   height: 100%;
   margin-top: 0;
   margin-left: 0;
   border: 0;
   padding: 0 15px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
   box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
   background-color: $mainnav-dropdown-submenu;
   .nav-item {
    border-bottom: 1px solid transparent;
    &:last-child {
     border-bottom: 0;
    }
   }
   > .row {
    flex-wrap: nowrap;
   }
   [class*="col-"] {
    min-width: 10rem;
    padding: 1.55rem 20px;
   }
  }
  &:hover {
   > .dropdown-menu {
    display: block;
   }
  }
 }
}

如果您将鼠标悬停在'Reiseziele'上方，则显示第一个弹出窗口，然后将鼠标悬停在'Asien / Ozeanien'，则显示第二个弹出窗口。一切正常。

我现在要在第一个弹出窗口之后进行第二个弹出窗口。否则，第一个弹出窗口（右侧）的阴影应与第二个弹出窗口重叠。

目前： shadow-box1 | box1 | shadow-box2 | box2 | shadow-box2

我想要： shadow-box1 | box1 | shadow-box1 | box2 | shadow-box2

我几乎尝试了所有使用z-index的方法，但我不理解。

Here a codepen example

enter image description here

1 个答案:

答案 0 :(得分：0)

如果我能够正确地解释您，则您希望box1的盒子阴影而不是box2阴影明显。为了使box1-shadow更加明显，请考虑以下几点：

  • box1和box2之间必须有一定的距离（box2的左边距==阴影宽度）。
  • 应调整Box2的阴影以使其在框的右侧而不是在左侧，例如（{https://www.cssmatic.com/box-shadow）。

请尝试进行上述更改，看看您的问题是否已解决。

相关问题
最新问题