Navbar dropdown not overflowing out of the navbar container - css

Question

I have created a navbar using tailwind. I needed to add a dropdown in the navbar. The dropdown works fine but it does not escape the navbar container and kind of hides under it.
I want the dropdown to exceed the container and overflow.
Here is my Navbar code:
<header className="bg-[#182038]">
<nav className="max-w-wt 2xl:max-w-ft mx-auto">
<Container className="relative z-50 sm:z-0 flex justify-between py-4 sm:py-2 drop-shadow-2xl ">
<div className="relative z-10 sm:z-0 flex items-center gap-16 px-0">
<Link to="/" aria-label="Home">
<img
className="object-contain w-36 md:w-56"
src="https://i.stack.imgur.com/iGBaP.png"
alt="Workflow"
/>
</Link>
<div className="hidden lg:flex lg:gap-10">
{checkAuth && <NavLinks />}
{!checkAuth && <ProNavLinks />}
</div>
</div>
<div className="flex items-center gap-2">
<Popover className="lg:hidden">
{({ open }) => (
<>
<Popover.Button
className="relative z-10 inline-flex items-center rounded-lg "
aria-label="Toggle site navigation"
>
{({ open }) =>
open ? (
<XIcon
className="block h-6 w-6 text-white"
aria-hidden="true"
/>
) : (
<MenuIcon
className="block h-6 w-6 text-white"
aria-hidden="true"
/>
)
}
</Popover.Button>
<AnimatePresence initial={false}>
{open && (
<>
<Popover.Overlay
static
as={motion.div}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-0 bg-gray-600/60 backdrop-blur"
/>
<Popover.Panel
static
as={motion.div}
initial={{ opacity: 0, y: -32 }}
animate={{ opacity: 1, y: 0 }}
exit={{
opacity: 0,
y: -32,
transition: { duration: 0.2 },
}}
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-[#182038] px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
>
<div className="space-y-4 text-white">
<MobileNavLink to="/">Home</MobileNavLink>
<MobileNavLink to="/cex-activity">
CEX Activity
</MobileNavLink>
<MobileNavLink to="/dex-activity">
DEX Activity
</MobileNavLink>
<MobileNavLink to="/trending">
Trending
</MobileNavLink>
<MobileNavLink to="/ranking">Ranking</MobileNavLink>
<MobileNavLink to="/pricing">Pricing</MobileNavLink>
</div>
<div className="mt-8 flex flex-col gap-4">
<button
type="button"
className=" p-1 rounded-md text-gray-400 hover:text-white border px-2 border-[#B0EEFD]"
onClick={props.handleLoginClick}
>
Login
</button>
<button
type="button"
className="bg-[#B0EEFD] px-3 py-1 rounded text-white hover:text-white"
onClick={props.handleRegisterClick}
>
Register
</button>
</div>
</Popover.Panel>
</>
)}
</AnimatePresence>
</>
)}
</Popover>
{auth ? (
<>
{user?.fullname && (
// <p className="text-white text-xs">Hello {user?.fullname}!</p>
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none ">
<Menu.Item>
{({ active }) => (
<a
href="/"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
Your Profile
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="/"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
Settings
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="/"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
Sign out
</a>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
)}
<button
type="button"
className="p-1 rounded-full text-gray-400 hover:text-white"
onClick={props.handleLogout}
>
Logout
</button>
</>
) : (
<>
<button
type="button"
className="hidden sm:block p-1 rounded-md text-[#B0EEFD] border px-2 border-[#B0EEFD]"
onClick={props.handleLoginClick}
>
Login
</button>
<button
type="button"
className="bg-[#B0EEFD] px-3 py-1 rounded text-black hover:text-black hidden sm:block "
onClick={props.handleRegisterClick}
>
Register
</button>
</>
)}
</div>
</Container>
</nav>
</header>
How can I fix this issue? Is there an issue with overflow? There is no overflow property in the navbar which would make me believe it is that issue.

Answer 1

You can add z-10 to the root Menu tag. This will lift it up to the top.