你如何定位一个下拉菜单，使其始终与其父级对齐（关于滚动）

Question

我仍在处理我的导航栏，我刚刚遇到一个问题，当导航栏不完全可见时，下拉子菜单不会与其父级对齐。我想“放下”当前相应的导航栏元素所在的位置。如果可能的话，我更喜欢纯 CSS 解决方案。

这是我当前的 CodePen：https://codepen.io/gisbert12843/pen/vYKGqpB?editors=1100

我知道问题在于它被定位为 'fixed'，但是当我也更改它时导航栏有点中断 'relative' :/

这是代码片段：

<nav class="navbar">
                <ul>
                    <li><a href="/index.html"><i class="fas fa-home"></i> Home</a></li>
                    <li class="active dropdown"><a href="/dist/htmls/leistungen.html"><i class="fas fa-cut"></i>
                            Leistungen</a>
                        <div class="dropdown-class">
                            <ul class="dropdown-content">
                                <li><a href="/dist/htmls/leistungen.html#Herren">Herren</a></li>
                                <li><a href="/dist/htmls/leistungen.html#Damen">Damen</a></li>
                                <li><a href="/dist/htmls/leistungen.html#FarbenUndSträhnen">Farben und Strähnen</a></li>
                                <li><a href="/dist/htmls/leistungen.html#WellenUndGlätten">Wellen und Glätten</a></li>
                                <li><a href="/dist/htmls/leistungen.html#EPT">Extension | Perücken | Toupets</a></li>
                                <li><a href="/dist/htmls/leistungen.html#Kuren">Kuren</a></li>
                                <li><a href="/dist/htmls/leistungen.html#Brautservice">Brautservice</a></li>
                                <li><a href="/dist/htmls/leistungen.html#Kosmetik">Kosmetik</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/dist/htmls/covid.html"><i class="fas fa-hands-wash"></i> Covid-19</a></li>
                    <li><a href="/dist/htmls/inspiration.html"><i class="fas fa-images"></i> Inspiration</a></li>
                    <li><a href="/dist/htmls/jobs.html"><i class="fas fa-user-graduate"></i> Jobs</a></li>
                    <li class="dropdown"><span><i class="fas fa-chevron-right"></i>Mehr</span>
                        <div class="dropdown-class">
                            <ul class="dropdown-content">
                                <li><a href="/dist/htmls/mehr htmls/impressum.html"> Impressum</a></li>
                                <li><a href="/dist/htmls/mehr htmls/datenschutz.html"> Datenschutz</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>

还有导航栏的 CSS。

.navbar {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex; //lets us align items
    // flex-wrap: wrap;
    // overflow: hidden;
    z-index: 999;
    position: relative;
    min-width: 100%;
    max-width: 100%;
    // min-height: 8vh;
    // max-height: 8vh;
    background-color: $navbar-color2;

    // text-align: center; //links in die horizontale mitte
    justify-content: center;
    align-items: center;
}

.active {
    background-color: $active-color;
}

.navbar ul {
    list-style: none; //aufzählzeichen entfernen
    display: flex; //links nebeneinander
    color: transparent;
    position: relative;
    // text-align: center;
}

.navbar ul li {
    // display: inline;
    position: relative;
    font-size: 2.5rem;
}

.navbar ul li span,
.navbar ul li a {
    // font-size: 2.5rem;
    padding: 23px;
    display: block;
    position: relative;
    z-index: 1;
    color: $font-color;
    text-decoration: none;

    // text-align: center;
}

.navbar ul li:hover {
    background-color: $hover-color;
    // transition: 0.08s;
}

.dropdown-class {
    display: none;
}

.navbar ul li:hover .dropdown-class {
    display: list-item;
    position: fixed;
    background: #ff8c00;
    // margin-top: 20px;
    // margin-left: -20px;
}

.navbar ul li:hover .dropdown-class ul {
    display: block;
}

.navbar ul li:hover .dropdown-class ul li {
    font-size: 2.5rem;
    // text-shadow:2px 2px 2px black;
    // width: auto;
    // padding: 10px;
    border-bottom: 1px ridge #fff;
    background: transparent;
    border-radius: 0;
    text-align: left;
    transition: 0.5s;
}

.navbar ul li:hover .dropdown-class ul li:last-child {
    border-bottom: none;
}

.navbar ul li:hover .dropdown-class ul li:hover {
    background-color: tomato;
}

如果有人知道解决方法，将不胜感激！ :)

Answer 1

使用 position: absolute; 而不是固定在这个 class .snap-wrapper .snap-box .navbar ul li:hover .dropdown-class 上并且有效！

你如何定位一个下拉菜单，使其始终与其父级对齐（关于滚动）

how do you position a dropdown-menu with it always aligning with its parent (regarding scrolling)

html

css

navbar

drop-down-menu

dropdown