JSFiddle - React, Tailwind, and code Playground

HTML

<section class="headerSection">
  <div class="navbarStickyScroll">

    <nav class="navNestable">
      <ul class="navItems">

        <li class="navItem">
          <a href="#" class="navLink">Dropdown</a>
          <div class="navDropContent">
            <a href="#">Dropdown link 1</a>
            <a href="#">Dropdown link 2</a>
          </div>
        </li>

        <li class="navItem">
          <a href="#" class="navLink">Dropdown</a>
          <div class="navDropContent">
            <a href="#">Dropdown link 1</a>
            <a href="#">Dropdown link 2</a>
          </div>
        </li>

      </ul>

      <button class="burger" type="button" aria-label="Navigation">
        <span></span>
      </button>
    </nav>

    <div class="siteLogo">
      Logo
    </div>

  </div>
</section>

CSS

/* Section */
.headerSection {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* navbarStickyScroll */
.navbarStickyScroll {
  width: 94dvw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 25px;
  border-radius: 20px;
  background: #3f6f2a;
  overflow: visible;
}

/* navNestable */
.navNestable {
  display: flex;
  align-items: flex-start;
  margin-left: 25px;
  margin-right: 25px;

}

/* navItems */
.navItems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0 36px;
  position: relative;
  z-index: 5000;
}

/* navItem */
.navItem {
  display: grid;
  grid-template-rows: auto 0fr;
  align-items: start;
  transition: grid-template-rows 0.25s ease;
}

/* Hover öffnet zweite Grid-Zeile */
.navItem:hover {
  grid-template-rows: auto 1fr;
}

/* navLink */
.navLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/* navDropContent */
.navDropContent {
  overflow: hidden;
  min-width: 220px;
  width: max-content;
  padding-top: 12px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Sichtbar beim Hover */
.navItem:hover .navDropContent {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Links im Dropdown */
.navDropContent a {
  display: block;
  padding: 7px 0;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
}

/* siteLogo */
.siteLogo {
  margin-right: 25px;
  color: #ffffff;
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Burger nur als Platzhalter gemäß Struktur */
.burger {
  display: none;
  background: transparent;
  border:...