z-index 菜单子菜单 css

问题描述 投票：0回答：1

在界面开发过程中，我遇到了菜单和子菜单的 z-index 问题。一级菜单需要在上面，二级菜单在下面。在“电子”部分中，子菜单项是重叠的。我需要在不删除菜单的情况下防止这种情况发生。或者，建议另一种方法来保持菜单的外观。

代码笔

<body>
<header>
  <nav class="navbar navbar-expand-lg fixed-top align-items-center navbar-blue">
    <div class="container">
      <div class="logo">
        <a href="#"></a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">
          <li class="menu-item nav-item menu-item-has-children">
            <a href="#" class="nav-link">Products
              <span class="submenu-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none" data-depth="0">
                  <path d="M5.90918 7.5L10.9092 12.5L15.9092 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
            <ul class="menu slideDown">
              <li class="menu-item nav-item menu-item-has-children">
                <a href="#" class="nav-link">Electronics
                  <span class="submenu-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none" data-depth="1">
                      <path d="M5.90918 7.5L10.9092 12.5L15.9092 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </span>
                </a>
                <ul class="submenu slideRight">
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Smartphones</a>
                  </li>
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Laptops</a>
                  </li>
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Accessories</a>
                  </li>
                </ul>
              </li>
              <li class="menu-item nav-item">
                <a href="#" class="nav-link">Clothing</a>
              </li>
              <li class="menu-item nav-item">
                <a href="#" class="nav-link">Home Appliances</a>
              </li>
            </ul>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Services</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Blog</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Contacts</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">About Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,300..800&display=swap");

/* Variables */
:root {
  --white: #f9f9f9;
  --grey: #d8dcde;
  --blue2: #0c3650;
  --black: #333;
  --border-radius: 20px;
}

/* Global Styles */
body {
  background: white;
  color: var(--black);
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

li {
  list-style: none;
}

.logo a {
  color: var(--white);
}

/* Navbar Styles */
.navbar-blue {
  height: 80px;
  margin: 20px 20px 0;
  backdrop-filter: blur(6px);
  border-radius: var(--border-radius);
  background: var(--blue2);
  color: var(--white);
}

.nav-link {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.nav-link:hover {
  border-bottom: 2px solid var(--white);
  color: var(--white);
}

.menu,
.submenu {
  display: none;
}

.submenu-icon svg {
  transition: transform 0.3s ease-in-out;
  float: right;
}

.menu-item-has-children:hover > a > .submenu-icon svg {
  transform: rotate(180deg);
}

.nav-item {
  position: relative;
  z-index: 2; /* Встановлюємо вищий z-index для елементів першого рівня */
}

.nav-item:hover > .menu {
  min-width: 225px;
  padding: 25px 0 0 0;
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  z-index: 2; /* Меню першого рівня вище підменю */
}

.menu .nav-item {
  padding: 0 8px;
  background: var(--grey);
}

.menu .nav-item:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.menu .nav-item:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.menu .nav-item .nav-link {
  color: var(--black);
  border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item .nav-link:hover {
  color: var(--blue2);
  border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item:last-child > .nav-link {
  border-bottom: none;
}

.nav-item:hover > .submenu {
  min-width: 225px;
  padding: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 200px;
  z-index: 1; /* Підменю нижче за меню першого рівня */
}

.submenu .nav-item {
  padding-left: 30px;
}

.submenu .nav-item:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 0;
}

.submenu .nav-item:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

/* Animations */
@keyframes slideDown {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slideDown {
  animation-name: slideDown;
  animation-duration: 0.3s;
}

@keyframes slideRight {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideRight {
  animation-name: slideRight;
  animation-duration: 0.3s;
}

/* Submenu Icon Rotation */
.rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}
</style>

</body>

这是鼠标悬停在菜单上时的外观。屏幕截图

html css bootstrap-5
1个回答
0
投票

在这种情况下，您希望将 

z-index
设置为负数。同样对于内部 V 形，我让它旋转 
-90deg

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,300..800&display=swap");

/* Variables */
:root {
  --white: #f9f9f9;
  --grey: #d8dcde;
  --blue2: #0c3650;
  --black: #333;
  --border-radius: 20px;
}

/* Global Styles */
body {
  background: black;
  color: var(--black);
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

li {
  list-style: none;
}

.logo a {
  color: var(--white);
}

/* Navbar Styles */
.navbar-blue {
  height: 80px;
  margin: 20px 20px 0;
  backdrop-filter: blur(6px);
  border-radius: var(--border-radius);
  background: var(--blue2);
  color: var(--white);
}

.nav-link {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.nav-link:hover {
  border-bottom: 2px solid var(--white);
  color: var(--white);
}

.menu,
.submenu {
  display: none;
}

.submenu-icon svg {
  transition: transform 0.3s ease-in-out;
  float: right;
}

.menu-item-has-children:hover > a > .submenu-icon svg {
  transform: rotate(180deg);
}

.nav-item {
  position: relative;
  z-index: 2; /* Встановлюємо вищий z-index для елементів першого рівня */
}

.nav-item:hover > .menu {
  min-width: 225px;
  padding: 25px 0 0 0;
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  z-index: 2; /* Меню першого рівня вище підменю */
}

.menu .nav-item {
  padding: 0 8px;
  background: var(--grey);
}

.menu .nav-item:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.menu .nav-item:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.menu .nav-item .nav-link {
  color: var(--black);
  border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item .nav-link:hover {
  color: var(--blue2);
  border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item:last-child > .nav-link {
  border-bottom: none;
}

.nav-item:hover > .submenu {
  min-width: 225px;
  padding: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 200px;
  z-index: -1;
}

.submenu .nav-item {
  padding-left: 30px;
}

.submenu .nav-item:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 0;
}

.submenu .nav-item:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

/* Animations */
@keyframes slideDown {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slideDown {
  animation-name: slideDown;
  animation-duration: 0.3s;
}

@keyframes slideRight {
  0% {
    transform: translateX(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideRight {
  animation-name: slideRight;
  animation-duration: 0.3s;
}

/* Submenu Icon Rotation */
.rotate:hover > a> .submenu-icon svg{
  transform: rotate(-90deg);
  transition: transform 0.3s ease-in-out;
}
<header>
  <nav class="navbar navbar-expand-md fixed-top align-items-center navbar-blue">
    <div class="container">
      <div class="logo">
        <a href="#"></a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">
          <li class="menu-item nav-item menu-item-has-children">
            <a href="#" class="nav-link">Products
              <span class="submenu-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none" data-depth="0">
                  <path d="M5.90918 7.5L10.9092 12.5L15.9092 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
            <ul class="menu slideDown">
              <li class="menu-item nav-item rotate menu-item-has-children">
                <a href="#" class="nav-link">Electronics
                  <span class="submenu-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none" data-depth="1">
                      <path d="M5.90918 7.5L10.9092 12.5L15.9092 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </span>
                </a>
                <ul class="submenu slideRight">
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Smartphones</a>
                  </li>
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Laptops</a>
                  </li>
                  <li class="menu-item nav-item">
                    <a href="#" class="nav-link">Accessories</a>
                  </li>
                </ul>
              </li>
              <li class="menu-item nav-item">
                <a href="#" class="nav-link">Clothing</a>
              </li>
              <li class="menu-item nav-item">
                <a href="#" class="nav-link">Home Appliances</a>
              </li>
            </ul>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Services</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Blog</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">Contacts</a>
          </li>
          <li class="menu-item nav-item">
            <a href="#" class="nav-link">About Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.