悬停时下拉子菜单消失

Question

虽然我知道有几个关于此问题的讨论，但 none 的解决方案解决了我的问题。无论我做什么，当您停止将鼠标悬停在 parent 上后，我尝试使用的 CSS 子菜单就会消失。我一点也不知道是什么原因造成的，我真的一直盯着这个看，试图找到解决办法，但就是找不到。我尝试添加一个 top: px;到 CSS 中的子菜单，这允许我 select 子菜单选项，但它也移动了菜单，使其看起来覆盖 parent li 并居中，这也是对我没有好处，因为我需要它直接出现在下面。 header 会剪掉它吗？如果是的话，我需要添加什么来改变它？非常感谢所有帮助！

.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;
}

<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>

Answer 1

我最终确实解决了这个问题，但我认为我应该回来更新我的解决方案，以防它对遇到类似问题的任何人有所帮助。其实很简单。

我不得不在这里添加一个 z-index：

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

这是向其他用户推荐的，我最初尝试过但没有将其放入 li:hover 因此没有用。我猜是因为高 z-index 迫使它到顶部，所以它通过将子菜单放在它上面来停止导致剪裁的任何东西。我一定是误读了某处的内容，并将 z-index 放在了错误的部分。这里真正的解决方案可能是仔细阅读您的代码！

悬停时下拉子菜单消失

Dropdown Submenu Disappears on Hover

html

css

navigation

submenu