Flexbox dropdown menu inside of a Grid item navbar

I am starting to learn basic webdesign, I am kinda stuck with my Navbar for the last few days.

I am trying to produce a structure based on a CSS Grid. The Dropdown menu should unfold in a column below the navbar itself while being aligned with the menu point on the left side and overflow with the content towards the right side.

My navbar is currently a flexbox, but no matter what I do the dropdown menu either doesn't show at all or is bugged like in the version below.

I think it has something to do with the navbar itself being placed in a grid zone, but I just can't figure out a solution or even an alternative.

This is my current CodePen: https://codepen.io/gisbert12843/pen/pobJbyQ

And this is the Code:

<body>
    <div class="the_grid">
        <nav class="navbar">
            <ul>
                <li class="active"><a href="/index.html"><i class="fas fa-home"></i> Home</a></li>
                <li class="dropdown"><a href="/dist/htmls/leistungen.html"><i class="fas fa-cut"></i> Leistungen</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Herren</a></li>
                        <li><a href="#">Damen</a></li>
                        <li><a href="#">Farben und Strähnen</a></li>
                        <li><a href="#">Wellen und Glätten</a></li>
                        <li><a href="#">Extension | Perücken | Toupets</a></li>
                        <li><a href="#">Kuren</a></li>
                        <li><a href="#">Brautservice</a></li>
                        <li><a href="#">Kosmetik</a></li>
                    </ul>
                </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"><a href="/dist/htmls/mehr.html"><i class="fas fa-chevron-right"></i> Mehr</a>
                    <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>
                </li>
            </ul>
        </nav>


        <div class="sidebar">


        </div>

        <div class="content1">


        </div>

        <div class="content2">



        </div>

    </div>
</body>

And this is the CSS:

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

html {
  height: 100vh;
  width: 100vw;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: url(/images/background2.jpg) no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0px 3.5rem;
  z-index: 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
}

.the_grid {
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 0.6fr 1fr 1fr 1fr;
  grid-template-rows: 0.22fr 1fr 1.5fr 0.5fr;
  grid-template-areas: "navb navb navb navb"
 "sb c1 c1 c1"
 "sb c1 c1 c1"
 "sb c2 c2 c2";
}

.navbar {
  grid-area: navb;
  display: flex;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  background-color: #ff1a4f;
  justify-content: center;
  align-items: center;
}

.active {
  background-color: #ff573a;
}

.navbar ul {
  list-style: none;
  display: flex;
  color: transparent;
  position: relative;
}

.navbar ul li {
  position: relative;
}

.navbar ul li a {
  font-size: 1.5rem;
  padding: 23px;
  display: block;
  position: relative;
  z-index: 1;
  color: #e4e4e4;
  text-decoration: none;
}

.navbar ul li a:hover {
  background-color: #ff8c00;
  transition: 0.08s;
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.the_grid .navbar .dropdown-content li {
  display: none;
  position: absolute;
  top: 40px;
}

.navbar ul li:hover .dropdown-content li {
  display: block;
  top: 0px;
}

.sidebar {
  grid-area: sb;
  overflow: hidden;
  min-width: 100%;
  max-width: 100%;
  border-style: dashed;
  border-color: green;
}

.content1 {
  grid-area: c1;
  overflow: hidden;
  min-width: 100%;
  max-width: 100%;
  border-style: dashed;
  border-color: yellow;
}

.content2 {
  grid-area: c2;
  overflow: hidden;
  min-width: 100%;
  max-width: 100%;
  border-style: dashed;
  border-color: red;
}

I am grateful for any kind of suggestions and help! <3

--

P.S. This is my first 'contribution' here, please point me towards my mistakes regarding asking question etc.