Html 关闭主菜单下拉列表时，子菜单链接仍可单击

我正在尝试创建一个设置，其中有导航栏、导航栏中的可折叠菜单和网站内容

很抱歉，这是一个糟糕的例子，但有点像这样：

如您所见，如果在下拉列表未展开时将鼠标悬停在子菜单链接上，您仍然可以单击它们

当导航栏显示在所有内容上时，如何获得显示在内容后面的链接

我应用了

z-index

如下：

.navbar {
    position: fixed;
    z-index: 1000;
}

.big-dropdown {
    position: absolute;
    z-index: -1;
}

#content {
    position: relative;
    z-index: 999;
}

.big-dropdown {
  opacity: 0;
  height: 200px;
  background-color: #fff;
  position: absolute;
  left: -9999px; /* adjustment */
  top: 0;
  margin-top: 4em;
  width: 100%;
}

.show {
  opacity: 1!important;
  left: 0; /* new */
}

---

这可能不是您想要的，但是如果您更换

.show {
opacity: 1!important;
}

与

.show {
display: block;
}

使用

display: none;

而不是

opacity: 0;

---

考虑到堆叠顺序和其他

z-index

特性，使用

z-index

会很棘手。下面是一个完整的概述：

但是，对于一个简单易行的解决方案，由于您已经在使用

位置：绝对

，只需将子链接移出屏幕即可

因此，与此相反：

.big-dropdown {
  opacity: 0;
  height: 200px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 4em;
  width: 100%;
}

.show {
  opacity: 1!important;
}

试着这样做：

.navbar {
    position: fixed;
    z-index: 1000;
}

.big-dropdown {
    position: absolute;
    z-index: -1;
}

#content {
    position: relative;
    z-index: 999;
}

.big-dropdown {
  opacity: 0;
  height: 200px;
  background-color: #fff;
  position: absolute;
  left: -9999px; /* adjustment */
  top: 0;
  margin-top: 4em;
  width: 100%;
}

.show {
  opacity: 1!important;
  left: 0; /* new */
}

---

我确实考虑过这样做，而且确实有效，但由于网站的设置方式，我更喜欢使用不透明度来制作动画。Michael_B的答案正是我想要的，谢谢。这很容易应用，无需更改任何其他内容。很有魅力！！