悬停时下拉子菜单消失答案

【问题标题】：Dropdown Submenu Disappears on Hover悬停时下拉子菜单消失
【发布时间】：2017-01-02 16:46:03
【问题描述】：

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

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

【问题讨论】：

附加的代码 sn-p 工作得很好。您是否正在针对任何特定的浏览器对其进行测试？
我正在使用 Firefox。但这实际上并不是网站的所有代码，只是 header/nav 和相关 CSS 的 sn-p，因为这就是我的问题所在。这是否意味着当我试图将鼠标悬停在父 li 之外时，一定有其他原因导致它被剪辑并因此消失？
也许最近的父母会隐藏溢出。可能有很多可能性。不看代码很难知道根本原因。

标签： html css navigation submenu

【解决方案1】：

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

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

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

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

【讨论】：