Question

虽然我知道有关此问题的几个讨论，但没有一个解决方案解决了我的问题。无论我做什么，我试图使用的CSS子菜单在您停止在父li上方停留后消失。我不知道是什么导致了这一点，而且我一直在盯着这个，试图找到一个解决方案而且无法做到。我尝试添加一个顶部：px;到CSS中的子菜单，它允许我选择子菜单选项，但它也移动了菜单，使它看起来覆盖并居中于父李，这对我也没有好处，因为我需要它直接出现在下面。标题是否可以剪切它，如果是这样，我需要添加什么才能更改它？非常感谢所有的帮助！

＆＃13;

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
  display: none;
}
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}
/* Sub Menus */

.nav li li {
  font-size: .8em;
}
@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }
  .nav a {
    border-bottom: none;
  }
  .nav > ul > li {
    text-align: center;
  }
  .nav > ul > li > a {
    padding-left: 0;
  }
  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }
  .nav li:hover ul {
    display: block;
  }
  .nav li ul li {
    display: block;
  }
}
#header {
  float: left;
  background-color: #ffffff;
  cursor: default;
  padding: 1.75em 2em 0em 0em;
  position: relative;
}

＆＃13;

<header>
  <img id="logo" src="images/logo.jpg" alt="logo">
  <div class="nav">
    <ul>
      <li class="home"><a href="#">Home</a>
      </li>
      <li class="tutorials"><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Tutorial #1@@</a>
          </li>
          <li><a href="#">Tutorial #2</a>
          </li>
          <li><a href="#">Tutorial #3</a>
          </li>
        </ul>
      </li>
      <li class="about"><a class="active" href="#">About</a>
      </li>
      <li class="news"><a href="#">Newsletter</a>
        <ul>
          <li><a href="#">News #1</a>
          </li>
          <li><a href="#">News #2@@@</a>
          </li>
          <li><a href="#">News #3</a>
          </li>
        </ul>
      </li>
      <li class="contact"><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</header>

＆＃13;

Answer 1

我最终确实想到了这一点，但我认为我应该回来并使用我的解决方案进行更新，以防它对任何遇到类似问题的人有所帮助。实际上非常简单。

我必须在这里添加一个z-index：

      .nav li:hover ul {
          display: block;
          z-index: 99999;
      }

这是推荐给其他用户，我最初尝试过，但没有把它放在li：hover因此它不起作用。我猜因为高z-index迫使它到顶部，它通过将子菜单放在它上面来阻止导致剪辑的任何东西。我一定是误读了某些地方的某些东西，并把z-index放在了错误的部分。这里真正的解决方案可能是仔细阅读您的代码！

下拉子菜单在悬停时消失

1 个答案: