Dropdown Tailwind CSS menu with weird beviour

Question

I am planning to use Tailwind CSS to build a navigation bar with a drop down menu in my app.

Unfortunately, I have an issue when I open the drop down. It pushes down the main content and the footer (please see the images attached).

Not open:

Open:

I copied the drop down code from Tailwind website, the main content (with the texts 'Dashboard') is just <div> elements.

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

Why cannot the dropdown menu overlap the Dashboard content?

Answer 1

This is my updated MenuDropDown.js. My way is to add CSS position: 'absolute' in the dropdown menu.

<li className="relative">
    <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'>
        ...
    </button>
    <div
        id='dropdownNavbar'
        className={`absolute top-[/navbar's height/] left-0 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>