Menu and dropdown do not show the content that should be expanded，what happend?

[firework-a]

My code uses the menu and dropdown components, but why can't their contents be expanded correctly? Clicking does not respond.Why?

"use client";

export function NavBar() {
  return (
    <header className="h-[60px] w-[90%] shadow-sm rounded-xl mx-auto mt-[15px] px-[40px] fixed top-0 left-0 right-0 z-[999] flex justify-between items-center border border-gray-300/20 bg-[radial-gradient(transparent_1px,#fff_1px)] bg-[size:4px_4px] backdrop-blur-[4px] backdrop-saturate-[50%] overflow-hidden select-none">
      <div className="navbar-start">
        <div className="dropdown">
          <div
            tabIndex={0}
            role="button"
            aria-label="打开菜单"
            className="btn btn-ghost lg:hidden"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {" "}
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h8m-8 6h16"
              />{" "}
            </svg>
          </div>
          <ul
            tabIndex={0}
            className="menu menu-sm dropdown-content bg-base-100/80 backdrop-blur-md rounded-box z-1 mt-3 w-52 p-2 shadow"
          >
            <li>
              <a>图库</a>
            </li>

            <li>
              <a>精选</a>
              <ul className="p-2">
                <li>
                  <a>Submenu 1</a>
                </li>
                <li>
                  <a>Submenu 2</a>
                </li>
              </ul>
            </li>

            <li>
              <a>更多</a>
            </li>
          </ul>
        </div>
        <a className="btn btn-ghost text-xl">zf-wallpaper</a>
      </div>

      <div className="navbar-center hidden lg:flex">
        <ul className="menu menu-horizontal px-1 gap-8">
          <li>
            <a>图库</a>
          </li>

          <li>
            <details open>
              <summary>精选</summary>
              <ul className="p-2">
                <li>
                  <a>Submenu 1</a>
                </li>
                <li>
                  <a>Submenu 2</a>
                </li>
              </ul>
            </details>
          </li>

          <li>
            <a>更多</a>
          </li>
        </ul>
      </div>

      <div className="navbar-end">
        <div className="dropdown dropdown-end">
          <div
            tabIndex={0}
            role="button"
            className="btn btn-ghost btn-circle avatar"
          >
            <div className="w-8 rounded-full">
              <img
                alt="avatar"
                src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
              />
            </div>
          </div>
          <ul
            tabIndex={0}
            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
          >
            <li>
              <a className="justify-between">
                Profile
                <span className="badge">New</span>
              </a>
            </li>
            <li>
              <a>Settings</a>
            </li>
            <li>
              <a>Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </header>
  );
}

the project repo https://github.com/firework-a/daisyui-demo.git

[saadeghi]

Remove the overflow-hidden class from the <header> tag.

Let me know if you have a question.