[英]Headless UI & React Dropdown menu changing position when clicked
我想創建一個下拉菜單,為此我在 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>
<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>
嘗試刪除絕對類名並重試
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.