I'm using DaisyUi navbar but it doesnt open dropdown like it does on DaisyUi website Next.js

Question

I'm trying to work with daisy and tailwind not changing much with javascript but can't figure out why it doesn't behave same as on daisyUi web page.. when I click Parent on my script it just doesn't open dropdown menu, it adds open="" to details tag like it does on their page but except arrow rotating nothing else happens.

<div className="navbar bg-base-100">
  <div className="navbar-start">
    <div className="dropdown">
      <label tabIndex={0} 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>
      </label>
      <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
  </div>
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li tabIndex={0}>
        <details>
          <summary>Parent</summary>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div className="navbar-end">
    <a className="btn">Button</a>
  </div>
</div>

It's weird that when i put same code in my .tsx file it doesn't work.. any ideas? tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

package.json

  "name": "lion_lazuli_travel",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.8",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "axios": "^1.5.0",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "formik": "^2.4.3",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "daisyui": "^3.6.4",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3"
  }
}

Answer 1

1st: You must have updated dependencies, npm i -D daisyui@latest

2nd: Make your ul or un ordered list under your details tag is absolute.

<details>
     <summary>Parent</summary>
          <ul className="p-2 absolute z-20">
               <li>
                   <a>Submenu 1</a>
               </li>
               <li>
                   <a>Submenu 2</a>
               </li>
          </ul>
</details>

you may check it by expanding bottom padding of the parent container. Hope it helps