HTML CSS : Fixed Menu with submenu, 悬停在菜单上之前出现子菜单

Question

我有一个菜单，当我将鼠标悬停在菜单项上时，会出现一个子菜单。问题是，如果我将鼠标指向子菜单通常 出现的区域(当我悬停在菜单上时子菜单在屏幕上覆盖的区域)，子菜单是可见的。换句话说，即使我没有将鼠标悬停在菜单项上，它也会出现。我猜这可能是由于某些 z-indexing 问题？

如果需要更多扩展，请告诉我。

.menu-wrap {
  position: fixed;
  z-index: 4;
  top: 0;
  width: 100%;
  text-align: left;
  background: #10345A;
}
.menu {
  width: 100%;
  margin: 0px;
  text-align: left;
}
.menu li {
  margin: 0px;
  list-style: none;
}
.menu a {
  transition: all linear 0.15s;
  color: white;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: white;
  background-color: #FF6600;
}
.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}
/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #10345A;
  color: #FF6600;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}
.sub-menu {
  width: 300px;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 0;
  opacity: 0;
  transition: opacity linear 0.15s;
  background: gray;
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
  text-decoration: none;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #10345A;
  color: #FF6600;
}

<div class="menu-wrap">
  <nav class="menu">
    <ul>
      <li><a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 1</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu 3  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 3</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 4</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 5</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

顺便说一句，我也无法将菜单居中对齐，它总是左对齐。

Answer 1

发生这种情况的原因是因为您使用 opacity:0 隐藏了 .sub-menu，所以基本上它仍然存在并且 :hover父级 ul 上的 正在被激活，因为子级 ul 正在悬停。

您需要将其设置为 display:none，然后在悬停时将其设置为 display:block。

不过这个问题会丢失动画效果，所以我建议使用关键帧，如下所示。

.menu-wrap {
  position: fixed;
  z-index: 4;
  top: 0;
  width: 100%;
  text-align: left;
  background: #10345A;
}
.menu {
  width: 100%;
  margin: 0px;
  text-align: left;
}
.menu li {
  margin: 0px;
  list-style: none;
}
.menu a {
  transition: all linear 0.15s;
  color: white;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: white;
  background-color: #FF6600;
}
.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}
/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #10345A;
  color: #FF6600;
}
/*----- Bottom Level -----*/

/* ADD THESE */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
.menu li:hover .sub-menu {
  z-index: 1;
  display: block; /* ADD ME */
  -webkit-animation: fadeIn 0.15s; /* ADD ME */
  animation: fadeIn 0.15s; /* ADD ME */
}
.sub-menu {
  width: 300px;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 0;
  background: gray;
  display: none; /* ADD ME */
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
  text-decoration: none;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #10345A;
  color: #FF6600;
}

<div class="menu-wrap">
  <nav class="menu">
    <ul>
      <li><a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 1</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu 3  <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 3</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 4</a>
          </li>
          <li><a href="#"><span class="arrow">&#9658;</span>  Submenu 5</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>