当主菜单下拉菜单关闭时子菜单链接仍然可以点击

Question

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

抱歉举个不好的例子，但有点像这样：https://jsfiddle.net/2nqchLpf/

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

如何让链接显示在内容后面，同时让导航栏显示在所有内容之上？

我已经z-index这样申请了：

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

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

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

Answer 1

这可能不是您要查找的内容，但如果您替换

.show {
opacity: 1!important;
}

和

.show {
display: block;
}

并使用

display: none;

而不是

opacity: 0;

它会起作用

Answer 2

考虑到堆叠顺序和其他 z-index 特征，z-index 很棘手。这是完整的运行-down:

但对于一个简单易行的解决方案，因为您已经在使用 position: absolute，只需将子链接移出屏幕即可。

所以不是这个：

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

.show {
  opacity: 1!important;
}

尝试这样的事情：

.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 */
}

revised fiddle

当主菜单下拉菜单关闭时子菜单链接仍然可以点击

Sub-menu links still clickable when main menu drop-downs are closed

html

css

z-index