无头 UI 和 React 下拉菜单在单击时更改 position

Question

I want to create a dropdown menu, for which I'm using HeadlessUI on React with Tailwind.

The menu is working fine, except that when clicked on, the position of the menu changes, as in instead of dropping down perfectly from the menu button it overlays it (I don't know how to describe it exactly).

Here's a before and after, hope you can make out what I'm trying to say:

Before button is clicked After the button is clicked

The code for the dropdown menu:

function HomeMenu(props) {
return (
<Menu>
  <Menu.Button>{props.name}</Menu.Button>
  
  <Transition
    enter="transition duration-100 ease-out"
    enterFrom="transform scale-95 opacity-0"
    enterTo="transform scale-100 opacity-100"
    leave="transition duration-75 ease-out"
    leaveFrom="transform scale-100 opacity-100"
    leaveTo="transform scale-95 opacity-0"
  ></Transition>


  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a href="/account-settings">
          Account settings
        </a>
      )}
    </Menu.Item>
    <Menu.Item>
      {({ active }) => (
        <a href="/account-settings">
          Logout
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>
  )
  }

The div in which the menu is used:

<div className="flex items-center justify-center p-6">
      <h1 className="text-6xl px-3 rounded-md shadow-lg py-1 bg-lmgray">
          NEW STREET JOURNAL
      </h1>
      <div className="absolute right-20 mt-2 px-5 rounded-md border-2 border-gray shadow-lg py-1 bg-lmgray" >
        <HomeMenu name={props.name}/>
      </div>

    </div>

Answer 1

<div className="absolute right-20 mt-2 px-5 rounded-md border-2 border-gray shadow-lg py-1 bg-lmgray" >
        <HomeMenu name={props.name}/>
      </div>

try to remove the classname absolute and try again