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很棘手。这是一个彻底的破败：Basics of the CSS z-index property

但是对于简单易用的解决方案，由于您已经在使用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

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

2 个答案: