HTML CSS: 固定菜单带子菜单，子菜单在悬停菜单之前出现

Question

我有一个菜单，当我将鼠标悬停在菜单项上时，会出现一个子菜单。问题是，如果我把鼠标移到通常会出现子菜单的区域（当我悬停在菜单上时，屏幕上被子菜单覆盖的区域），子菜单就会出现。换句话说，即使我没有悬停在菜单项上，它也会出现。我想这可能是由于一些z-index问题引起的吗？如果需要更多解释，请告诉我。

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

作为附注，我也无法将菜单居中对齐，它总是左对齐。

- Praveen

---

请尝试仅粘贴相关代码，并尝试使用类似 JSFiddle 的工具展示您的代码行为。 - Gemtastic

你的问题是，你的子菜单仍然存在，只是透明度设置为0。使用display:none和display:block代替！ - mahega

@mh-itc：谢谢，伙计。帮了大忙。 - Praveen

Answer 1

这是因为你使用opacity:0隐藏了.sub-menu，所以它仍然存在，当你将鼠标放在子菜单的时候，父级ul上的:hover被触发。

你需要将其设置为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>

- Jamie Barker

---

谢谢，伙计。它起作用了。由于声望点数不足，无法点赞。 - Praveen

Answer 2

在.submenu中，你设置了opacity: 0，所以元素存在但是透明。这就是为什么当你悬停时它会显示出来（因为你在悬停时将不透明度设回了1）。

看一下我的fiddle，我改用display: none：https://jsfiddle.net/mcowx5j6/1/（还把.menu居中了）。

- boszlo

Answer 3

.menu {
width:100%;
margin:0px;
text-align:left;

将此更改为

.menu {
width:100%;
margin:0px;
text-align:center;

- Aditya K

---

那样可以将子菜单对齐。我希望它右对齐。 - Praveen

好的，您希望菜单靠右对齐，子菜单应该居中对齐，是吗？ - Aditya K

兄弟，它在我的系统上正常工作，可以告诉我你使用的是哪个平台吗？ - Aditya K

我会再试一次看看。我想我也尝试了你的选项，但是由于我的主要关注点在子菜单上，所以记不太清了。我使用IE9。它必须在上面运行。无论如何，感谢你的帮助，伙计。 - Praveen