I’m using NextJS with Tailwind and Headless UI, i have grabbed some menu dropdown component from headless ui and it works fine but i notice some styles that applies to MenuItems component such as position:absolute; top:54px;..etc, and these styles are applied dynamically, for example if i remove position:fixed; from header the dropdown top property will change its value, i am more interested in knowing how to know where styles come from than solving the problem, someone said go to the computed tab then select the style and it will show you the source, but that’s not happening as it doesn’t show you the source as well !

Here is my Menu component in case you want to have a look:

<Menu>
  <MenuButton className="inline-flex items-center gap-2 rounded-md bg-gray-800 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-700 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white">
    Options
  </MenuButton>

  <MenuItems
    transition
    anchor="bottom end"
    className="w-52 origin-top-right rounded-xl border border-white/5 bg-rose-800 p-1 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
  >
    <MenuItem>
      <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
        Edit
        <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
          ⌘E
        </kbd>
      </button>
    </MenuItem>
    <MenuItem>
      <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
        Duplicate
        <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
          ⌘D
        </kbd>
      </button>
    </MenuItem>
    <div className="my-1 h-px bg-white/5" />
    <MenuItem>
      <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
        Archive
        <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
          ⌘A
        </kbd>
      </button>
    </MenuItem>
    <MenuItem>
      <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
        Delete
        <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
          ⌘D
        </kbd>
      </button>
    </MenuItem>
  </MenuItems>
</Menu>