Question

我有一个下拉菜单，除了堆叠顺序外，其他所有功能均正常运行。我希望它看起来好像是从按钮后面出来的，但是即使我使用了z-index，它仍会继续出现在按钮前面。这是代码：

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(0%);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transform: translateY(-100%);
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}

<div class="nav-element subnav-wrapper"><a class="black-text" href="#">ABOUT</a>
          <div class="subnav">
            <a class="subnav-element" href="#">WHO WE ARE</a>
            <a class="subnav-element" href="#">PROJECTS</a>
            <a class="subnav-element" href="#">PARTNERS</a>
            <a class="subnav-element" href="#">CONTACT</a>
          </div>
        </div>

Answer 1

这是因为transform: translateY(-100%);从.subnav类中删除了转换属性。请参阅下面的更新代码段：

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(0%);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}

<div class="nav-element subnav-wrapper"><a class="black-text" href="#">ABOUT</a>
  <div class="subnav">
    <a class="subnav-element" href="#">WHO WE ARE</a>
    <a class="subnav-element" href="#">PROJECTS</a>
    <a class="subnav-element" href="#">PARTNERS</a>
    <a class="subnav-element" href="#">CONTACT</a>
  </div>
</div>

Answer 2

您必须在 css （transform: translateY属性）中进行一些更改。检查以下代码，它将对您有帮助。

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 0;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0s, 0s, 0.05s;
  transform: translateY(-5px);
  z-index: 1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;  
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
  transform: translateY(-10px);
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
  
 
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
   position:relative;
   z-index:1;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}

<div class="nav-element subnav-wrapper">
  <a class="black-text" href="#">ABOUT</a>
      <div class="subnav">
        <a class="subnav-element" href="#">WHO WE ARE</a>
        <a class="subnav-element" href="#">PROJECTS</a>
        <a class="subnav-element" href="#">PARTNERS</a>
        <a class="subnav-element" href="#">CONTACT</a>
      </div>
</div>

Answer 3

如果这对您有用，则将过渡转换为subnav包装而不是subnav，在这种情况下，看起来好像不在about按钮之上。但通常，如果它位于“关于”按钮的后面，则应保持隐藏状态。

.subnav-wrapper {
  position: relative;
  padding: 10px 15px !important;
  cursor: pointer;
  z-index: 1;
  transition: ease-in-out 0s, visibility 0.05s linear 0.3s, z-index 0.3s linear 0.01s, transform 0.14s;
}

.subnav-wrapper:hover .subnav {
  visibility: visible;
  transition-delay: 0, 0, 0.55s;
  z-index: -1;
}

.subnav-wrapper:hover .subnav a {
  opacity: 1;
}

.subnav {
  position: absolute;
  padding: inherit;
  background-color: black;
  color: white;
  z-index: -1;
  min-width: 110px;
  visibility: hidden;
  margin-top: 10px;
}

.subnav a {
  opacity: 0;
  transition: opacity 0.3s;
}

a {
  text-decoration: none;
}

.black-text {
  color: black;
}

.subnav-element {
  color: white;
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.9em;
}

<br/><br/><br/><br/>
<div class="nav-element subnav-wrapper">
<a class="black-text" href="#">ABOUT</a>
          <div class="subnav">
            <a class="subnav-element" href="#">WHO WE ARE</a>
            <a class="subnav-element" href="#">PROJECTS</a>
            <a class="subnav-element" href="#">PARTNERS</a>
            <a class="subnav-element" href="#">CONTACT</a>
          </div>
        </div>

如何使下拉菜单看起来好像是从按钮后面出来的？

3 个答案: