Показывая раскрывающееся меню за заголовком ⇐ Html

[Anonymous]

В настоящее время я пытаюсь создать Navbar на вершине моего личного сайта. В анимации, которая делает раскрывающееся меню видимым, оно падает с вершины экрана, проходя перед всей навигацией. Я хочу, чтобы выпадающее меню было отображено за всем заголовком, чтобы оно ничего не покрывало при панировании. рендеринг за заголовком. Из того, что я видел, отрицательный Z-Index On .dropdown-content позволяет быть сложенным за NAV , но никогда не за заголовком . Есть ли какие-либо изменения, которые я могу внести, чтобы иметь такое поведение? Без него в других элементах на моем сайте отображаются оперть It.

Код: Выделить всё

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);
}< /code>
    

[url=index.html]Home[/url]

About

[url=about.html#education]Education[/url]
[url=about.html#experience]Experience[/url]
[url=about.html#skills]Skills[/url]


[url=contact.html]Contact[/url]

Подробнее здесь: https://stackoverflow.com/questions/741 ... ind-header