Dropdown menu in a dropdown menu, on responsive version

[honocoder]

Hello guys,

I'm having some trouble with a dropdown-in-dropdown, in the responsive version of my navbar.

I'm pretty new with Tailwind and totally new to DaisyUI, so sorry if my question is dumb.

Is there a way to make the children of "Services" appear, let's say under Services when we open the dropdown menu, instead of its right ?

Here's my code :

const Navbar = () => {
  return (
    <div className="navbar bg-base-100">
      <div className="navbar-start">
        <a className="btn btn-ghost normal-case text-xl">Brand&Com</a>
      </div>
      <div className="navbar-center hidden lg:flex">
        <ul className="menu menu-horizontal p-0">
          <li>
            <a>Accueil</a>
          </li>
          <li tabIndex="0">
            <a>
              Services
              <svg
                className="fill-current"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
              >
                <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
              </svg>
            </a>
            <ul className="p-2">
              <li>
                <a>Community Management</a>
              </li>
              <li>
                <a>Amélioration de la notoriété</a>
              </li>
              <li>
                <a>Marketing digital</a>
              </li>
            </ul>
          </li>
          <li>
            <a>Portfolio</a>
          </li>
          <li>
            <a>Contact</a>
          </li>
        </ul>
      </div>
      <div className="navbar-end">
        <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-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 right-8"
          >
            <li>
              <a>Accueil</a>
            </li>
            <li tabIndex="0">
              <a className="justify-between">
                Services
                <svg
                  className="fill-current"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                >
                  <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
                </svg>
              </a>
              <ul className="p-2">
                <li>
                  <a>Community Management</a>
                </li>
                <li>
                  <a>Amélioration de la notoriété</a>
                </li>
                <li>
                  <a>Marketing digital</a>
                </li>
              </ul>
            </li>
            <li>
              <a>Portfolio</a>
            </li>
            <li>
              <a>Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Navbar;

Thanks in advance for your help!

[rhscjohn-dev]

Check out this Taiwlwind Play example.

Look at line 14 for the magic. You should also change the svg on line 12

[honocoder]

Thanks a lot, the magic happened!