Search code examples
htmlcssdrop-down-menunavbardropdown

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

I am still working on my navbar and I just experienced a problem where the dropdown-submenu won't align with its parent when the navbar isnt fully visible. I would want to "drop" whereever the corresponding navbar-element currently is. If it is possible I would prefer a pure CSS solution.

enter image description here

Here is my current CodePen: https://codepen.io/gisbert12843/pen/vYKGqpB?editors=1100

I know the problem lies in it being positioned as 'fixed', but the navbar kind of breaks when I change it too 'relative' :/

Heres the Code-snippet:

<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>

And the CSS for the navbar.

.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;
}

Would be very grateful if anyone knows a workaround! :)

Solution

  • Use position: absolute; instead of fixed on this class .snap-wrapper .snap-box .navbar ul li:hover .dropdown-class and it works!