Выпадающий Z-Index Проблемы - PullRequest
Новая
       47

Выпадающий Z-Index Проблемы

0 голосов
/ 11 апреля 2020

Я пытаюсь сложить выпадающие меню за панелью навигации, чтобы тень от рамки не была видна над верхней границей выпадающего меню. Это работает визуально, если у 'navbar-dropdown-list' есть z-индекс -1, но тогда якоря в выпадающем списке больше не работают. Если у кого-то есть решение, я был бы очень признателен

HTML: 

<header>
<nav>
<div class="navbar-wrapper">
<ul class="navbar-list">
<li>
<div class="navbar-button">
<a href="" class="navbar-button-anchor">
<span class="navbar-button-text">Link</span>
</a>

<ul class="navbar-dropdown-list">
<li><a href="" class="navbar-dropdown-anchor">Link</a></li>
<li><a href="" class="navbar-dropdown-anchor">Link</a></li>
<li><a href="" class="navbar-dropdown-anchor">Link</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    position: sticky;
    top: 0;
    -webkit-box-shadow: 0px 2px 16px 0px rgba(55,55,55,0.2);
    -moz-box-shadow: 0px 2px 16px 0px rgba(55,55,55,0.2);
    box-shadow: 0px 2px 16px 0px rgba(55,55,55,0.2);
}

nav {
    background-color: #ffffff;
}

.navbar-wrapper {
    width: 90%;
    max-width: 1200px;
    height: 50px;
    margin: 0 auto;
    display: grid;
    align-items: center;
    text-align: center;
}

.navbar-list {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.navbar-button:hover .navbar-dropdown-list {
    max-height: 500px;
    transition: max-height 0.4s ease-in;
}

.navbar-button-anchor {
    text-decoration: none;
    color: #373737;
    width: 100%;
    line-height: 50px;
}

.navbar-button-anchor:hover {
    color: #dac78d;
}

.navbar-dropdown-list {
    position: relative;
    background-color: #ffffff;

    -webkit-box-shadow:0px 2px 16px 0px rgba(55,55,55,0.2);
    -moz-box-shadow: 0px 2px 16px 0px rgba(55,55,55,0.2);
    box-shadow: 0px 2px 16px 0px rgba(55,55,55,0.2);

    list-style-type: none;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    width: auto;
}

.navbar-dropdown-anchor {
    float: none;
    display: block;
    text-align: left;
    padding: 12px 16px;
    text-decoration: none;
    color: #373737;
}

.navbar-dropdown-anchor:hover {
    color: #ffffff;
    background-color: #dac78d;
}
...