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

Question

我想创建一个下拉菜单，为此我在 React with Tailwind 上使用 HeadlessUI。

菜单工作正常，除了单击时，菜单的 position 会发生变化，而不是从菜单按钮完全下拉，而是覆盖它（我不知道如何准确描述它）。

这是之前和之后，希望你能明白我想说什么：

单击按钮前 单击按钮后

下拉菜单的代码：

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>
  )
  }

使用菜单的 div：

<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>

尝试删除绝对类名并重试