内容覆盖的下拉菜单

Question

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

这是我的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添加背景色

你的问题不是文本重叠，而是你的下拉列表是透明的，所以它后面的文本会显示出来。