我目前正在try 在我的个人网站的顶部创建一个导航栏.在使下拉菜单可见的动画中，下拉菜单从屏幕顶部向下平移，穿过整个导航栏.我希望下拉菜单呈现在整个标题后面，这样它在平移时不会遮盖任何东西.
我在下面包含了一段代码片段，它显示了正在发生的事情(CSS稍微简化了一些，但基本相同).
我try 了z-index和position属性的许多组合，但还不能在标题后面显示下拉菜单.在我看来，.dropdown-content的负z-index可以让它堆叠在nav后面，但永远不会在header后面.我能做些什么来改变这种行为吗？
还请注意，header需要正z-index，因为它有positioning: sticky；如果没有它，我的网站中的其他元素将显示在它之上.
body {
background-color: navy;
}
header {
z-index: 10;
top: 0;
position: sticky;
background-color: #141414de;
color: #fff;
}
nav {
display: inline-block;
text-align: left;
margin: 0 auto;
min-width: 50%;
}
nav a, nav button {
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
display: inline-block;
color: #858585;
text-decoration: none;
padding: 20px 5px;
margin: 0 10px;
border: none;
border-top: 3px solid transparent;
background-color: transparent;
font-size: 1rem;
}
nav a.active {
color: #fff;
border-top: 3px solid #afafaf;
}
nav>a:not(.active):hover {
color: #ffffff;
border-color: #686868;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
z-index: -10;
display: block;
visibility: hidden;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
transition: transform 1s ease-in-out, visibility 1s ease-in-out;
transform: translateY(-200%);
}
.dropdown:hover .dropdown-content {
visibility: visible;
transform: translateY(0);
} <header>
<nav>
<a href="index.html" class="active">Home</a>
<div class="dropdown">
<button>About</button>
<div class="dropdown-content">
<a href="about.html#education">Education</a>
<a href="about.html#experience">Experience</a>
<a href="about.html#skills">Skills</a>
</div>
</div>
<a href="contact.html">Contact</a>
</nav>
</header>