title: Navbar dropdown not overflowing out of the navbar container
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/2OUG6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2OUG6.png" alt="enter image description here" /></a></p>
  <p>I want the dropdown to exceed the container and overflow.</p>
  <p>Here is my Navbar code:</p>
  <pre><code>&lt;header className=&quot;bg-[#182038]&quot;&gt;
        &lt;nav className=&quot;max-w-wt 2xl:max-w-ft mx-auto&quot;&gt;
          &lt;Container className=&quot;relative z-50 sm:z-0 flex justify-between py-4 sm:py-2 drop-shadow-2xl  &quot;&gt;
            &lt;div className=&quot;relative z-10 sm:z-0 flex items-center gap-16 px-0&quot;&gt;
              &lt;Link to=&quot;/&quot; aria-label=&quot;Home&quot;&gt;
                &lt;img
                  className=&quot;object-contain w-36 md:w-56&quot;
                  src=&quot;https://i.stack.imgur.com/iGBaP.png&quot;
                  alt=&quot;Workflow&quot;
                /&gt;
              &lt;/Link&gt;
              &lt;div className=&quot;hidden lg:flex lg:gap-10&quot;&gt;
                {checkAuth &amp;&amp; &lt;NavLinks /&gt;}
                {!checkAuth &amp;&amp; &lt;ProNavLinks /&gt;}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;flex items-center gap-2&quot;&gt;
              &lt;Popover className=&quot;lg:hidden&quot;&gt;
                {({ open }) =&gt; (
                  &lt;&gt;
                    &lt;Popover.Button
                      className=&quot;relative z-10 inline-flex items-center rounded-lg &quot;
                      aria-label=&quot;Toggle site navigation&quot;
                    &gt;
                      {({ open }) =&gt;
                        open ? (
                          &lt;XIcon
                            className=&quot;block h-6 w-6 text-white&quot;
                            aria-hidden=&quot;true&quot;
                          /&gt;
                        ) : (
                          &lt;MenuIcon
                            className=&quot;block h-6 w-6 text-white&quot;
                            aria-hidden=&quot;true&quot;
                          /&gt;
                        )
                      }
                    &lt;/Popover.Button&gt;
                    &lt;AnimatePresence initial={false}&gt;
                      {open &amp;&amp; (
                        &lt;&gt;
                          &lt;Popover.Overlay
                            static
                            as={motion.div}
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className=&quot;fixed inset-0 z-0 bg-gray-600/60 backdrop-blur&quot;
                          /&gt;
                          &lt;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=&quot;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&quot;
                          &gt;
                            &lt;div className=&quot;space-y-4 text-white&quot;&gt;
                              &lt;MobileNavLink to=&quot;/&quot;&gt;Home&lt;/MobileNavLink&gt;
                              &lt;MobileNavLink to=&quot;/cex-activity&quot;&gt;
                                CEX Activity
                              &lt;/MobileNavLink&gt;
                              &lt;MobileNavLink to=&quot;/dex-activity&quot;&gt;
                                DEX Activity
                              &lt;/MobileNavLink&gt;
                              &lt;MobileNavLink to=&quot;/trending&quot;&gt;
                                Trending
                              &lt;/MobileNavLink&gt;
                              &lt;MobileNavLink to=&quot;/ranking&quot;&gt;Ranking&lt;/MobileNavLink&gt;
                              &lt;MobileNavLink to=&quot;/pricing&quot;&gt;Pricing&lt;/MobileNavLink&gt;
                            &lt;/div&gt;
                            &lt;div className=&quot;mt-8 flex flex-col gap-4&quot;&gt;
                              &lt;button
                                type=&quot;button&quot;
                                className=&quot;  p-1 rounded-md text-gray-400 hover:text-white border px-2 border-[#B0EEFD]&quot;
                                onClick={props.handleLoginClick}
                              &gt;
                                Login
                              &lt;/button&gt;
  
                              &lt;button
                                type=&quot;button&quot;
                                className=&quot;bg-[#B0EEFD] px-3 py-1 rounded text-white hover:text-white&quot;
                                onClick={props.handleRegisterClick}
                              &gt;
                                Register
                              &lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/Popover.Panel&gt;
                        &lt;/&gt;
                      )}
                    &lt;/AnimatePresence&gt;
                  &lt;/&gt;
                )}
              &lt;/Popover&gt;
              {auth ? (
                &lt;&gt;
                  {user?.fullname &amp;&amp; (
                    // &lt;p className=&quot;text-white text-xs&quot;&gt;Hello {user?.fullname}!&lt;/p&gt;
                    &lt;Menu as=&quot;div&quot; className=&quot;ml-3 relative&quot;&gt;
                      &lt;div&gt;
                        &lt;Menu.Button className=&quot;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&quot;&gt;
                          &lt;span className=&quot;sr-only&quot;&gt;Open user menu&lt;/span&gt;
                          &lt;img
                            className=&quot;h-8 w-8 rounded-full&quot;
                            src=&quot;https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot;
                            alt=&quot;&quot;
                          /&gt;
                        &lt;/Menu.Button&gt;
                      &lt;/div&gt;
                      &lt;Transition
                        as={Fragment}
                        enter=&quot;transition ease-out duration-100&quot;
                        enterFrom=&quot;transform opacity-0 scale-95&quot;
                        enterTo=&quot;transform opacity-100 scale-100&quot;
                        leave=&quot;transition ease-in duration-75&quot;
                        leaveFrom=&quot;transform opacity-100 scale-100&quot;
                        leaveTo=&quot;transform opacity-0 scale-95&quot;
                      &gt;
                        &lt;Menu.Items className=&quot;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 &quot;&gt;
                          &lt;Menu.Item&gt;
                            {({ active }) =&gt; (
                              &lt;a
                                href=&quot;/&quot;
                                className={classNames(
                                  active ? &quot;bg-gray-100&quot; : &quot;&quot;,
                                  &quot;block px-4 py-2 text-sm text-gray-700&quot;
                                )}
                              &gt;
                                Your Profile
                              &lt;/a&gt;
                            )}
                          &lt;/Menu.Item&gt;
                          &lt;Menu.Item&gt;
                            {({ active }) =&gt; (
                              &lt;a
                                href=&quot;/&quot;
                                className={classNames(
                                  active ? &quot;bg-gray-100&quot; : &quot;&quot;,
                                  &quot;block px-4 py-2 text-sm text-gray-700&quot;
                                )}
                              &gt;
                                Settings
                              &lt;/a&gt;
                            )}
                          &lt;/Menu.Item&gt;
                          &lt;Menu.Item&gt;
                            {({ active }) =&gt; (
                              &lt;a
                                href=&quot;/&quot;
                                className={classNames(
                                  active ? &quot;bg-gray-100&quot; : &quot;&quot;,
                                  &quot;block px-4 py-2 text-sm text-gray-700&quot;
                                )}
                              &gt;
                                Sign out
                              &lt;/a&gt;
                            )}
                          &lt;/Menu.Item&gt;
                        &lt;/Menu.Items&gt;
                      &lt;/Transition&gt;
                    &lt;/Menu&gt;
                  )}
  
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;p-1 rounded-full text-gray-400 hover:text-white&quot;
                    onClick={props.handleLogout}
                  &gt;
                    Logout
                  &lt;/button&gt;
                &lt;/&gt;
              ) : (
                &lt;&gt;
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;hidden sm:block p-1 rounded-md text-[#B0EEFD] border px-2 border-[#B0EEFD]&quot;
                    onClick={props.handleLoginClick}
                  &gt;
                    Login
                  &lt;/button&gt;
  
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;bg-[#B0EEFD] px-3 py-1 rounded text-black hover:text-black hidden sm:block &quot;
                    onClick={props.handleRegisterClick}
                  &gt;
                    Register
                  &lt;/button&gt;
                &lt;/&gt;
              )}
            &lt;/div&gt;
          &lt;/Container&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  <p>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.</p>