Question

我建立了一个导航栏，并为它提供了一个不错的下拉转换。唯一的问题是，导航栏下方的任何文本一旦显示都会以某种方式出现在该栏的顶部。我几乎在所有可能的相关类中都使用过z-indexes，没有结果。

这是我的Codepen和我的代码。

CSS：

h1 {
  text-align: right;
  z-index: -999;
  margin-top: 50px;
}

.nav {
  padding: 0;
  border-style: solid;
  border-width: thin;
}

ul {
  list-style-type: none;
}

.link {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.dropdown {
  display: inline-block;
}

li.dropdown-content {
  text-align: center;
}

li:last-child {
  border-right: none;
}

.dropdown {
  position: relative;
  float: right;
}

.dropdown-content {
  display: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-2em);
  z-index: 999;
  transition: all 0.3s ease-in-out 0s,
  visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown,
.dropdown:hover .dropdown-content {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

Answer 1

为.dropdown-content

添加背景颜色

您的问题不是文本重叠，而是您的下拉列表是透明的，因此其后面的文本可以显示出来。

内容覆盖的下拉菜单

1 个答案: