Reactjs 下拉Tailwind CSS菜单与怪异beviour

我计划在我的应用程序中使用TailWind CSS来构建一个带有下拉菜单的导航栏.

不幸的是，当我打开下拉菜单时，我有一个问题.它下推的主要内容和页脚(请参阅所附图片).

Not open:个

Open:个

我从TailWind网站复制了下拉代码，主要内容(带有文本‘Dashboard’)只是&lt；div&gt；元素.

File Layout.js

const Layout = () => {
    return (
        <div>
            <NavBar />
            <Outlet />
            <Footer />
        </div>
    )
}

File Navbar.js

const NavBar = () => {
    return (
        <nav className='bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700'>
            <div className='max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4'>
                <Logo />
                <OpenMenuForMobile />
                <Menu />
            </div>
        </nav>
    )
}

File Menu.js

const Menu = () => {
    return (
        <div
            className='hidden w-full md:block md:w-auto'
            id='navbar-dropdown'>
            <ul className='flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700'>
                <MenuDropDown title='Administration' />
                <MenuSimpleItem title='Dashboard' path='#' />
                <MenuSimpleItem title='Stat' path='#' />
            </ul>
        </div>
    )
}

File MenuDropDown.js

const MenuDropDown = ( { title } ) => {

    const [isOpen, setIsOpen] = useState(false);
    const handleMenuDropDown = () => {
        setIsOpen(!isOpen);
    }

    return (
        <li>
        <button
            id='dropdownNavbarLink'
            onClick={handleMenuDropDown}
            className='flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent'>
            {title}
            <svg
                className='w-2.5 h-2.5 ms-2.5'
                aria-hidden='true'
                xmlns='http://www.w3.org/2000/svg'
                fill='none'
                viewBox='0 0 10 6'>
                <path
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    d='m1 1 4 4 4-4' />
            </svg>
        </button>
        <div
            id='dropdownNavbar'
            className={`z-10 font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 ${isOpen ? 'block' : 'hidden'}`}>
            <ul
                className='py-2 text-sm text-gray-700 dark:text-gray-400'
                aria-labelledby='dropdownLargeButton'>
                <MenuDropDownItem title='Programming languages' path='#' />
                <MenuDropDownItem title='Repositories' path='#' />
            </ul>
        </div>
    </li>

    )
}

File MenuDropDownItem.js

const MenuDropDownItem = ({ title, path }) => {
    return (
        <li>
            <a
                href={path}
                className='block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white'>
                {title}
            </a>
        </li>
    )
}

File Dashboard.js

const Dashboard = () => {
    return (
        <>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        <div>Dashboard</div>
        </>
    )
}

为什么下拉菜单不能与仪表板内容重叠？