Debugging the NavigationMenu.Content Positioning and Placing Below NavigationMenuTrigger

[lsbyerley]

I am trying to figure out why the NavigationMenuContent element is not directly below the NavigationMenuTrigger element. It seems passing data-state="open" to both the content and the trigger will not programmatically keep the content open for debugging. By default, does the content element not appear directly below? Is using the "optional" viewport element and styling it's position the only way to make the content appear below it's trigger element?

<header className='relative flex justify-center w-screen'>
  <NavigationMenu>
    <NavigationMenuList>

      <NavigationMenuItem>
        <Link href='/' legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Nav Menu
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <Link href='/' legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Menu Item
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuTrigger>Admin</NavigationMenuTrigger>
        <NavigationMenuContent>
          <Link href='/itemone' legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Content Item One
            </NavigationMenuLink>
          </Link>
          <Link href='/itemtwo' legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Content Item Two
            </NavigationMenuLink>
          </Link>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <LogoutButton />
      </NavigationMenuItem>

    </NavigationMenuList>
  </NavigationMenu>
  <ModeToggle />
</header>