Hide the chevron icon by default in dropdown and sho it on hover

[BenaliDjamel]

Here is what my ui (below), I want to hide the chevron icons by default and when I hover on item(let's say project 2) it shows.

[saadeghi]

Can you share your HTML?

[BenaliDjamel]

 <details className="dropdown w-full">
          <summary className="btn p-0 -mb-2 bg-transparent hover:bg-transparent border-none shadow-none font-medium">
            Projects
            <svg
              className="-ml-1 mt-0  size-4 text-gray-600"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fillRule="evenodd"
                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                clipRule="evenodd"
              />
            </svg>
          </summary>
          <ul className="menu dropdown-content z-[1] bg-base-100 rounded-box">
            {workspaceProjects?.projects?.map((project) => (
              <li key={project.id} className="text-xs w-full">
                <details className="dropdown">
                  <summary className="text-gray-600">{project.name}</summary>
                  <ul className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
                    <li className="text-xs text-gray-500">
                      <a>Issues</a>
                    </li>
                    <li className="text-xs text-gray-500">
                      <a>Sprint</a>
                    </li>
                    <li className="text-xs text-gray-500">
                      <Link to={`projects/${project.id}`}>Settings</Link>
                    </li>
                  </ul>
                </details>
              </li>
            ))}
          </ul>
        </details>

[saadeghi]

I wouldn't advise using dropdowns inside each other. It would be confusing for users but anyway,
A quick, easy way would be adding [&>li>details>summary]:after:opacity-0 [&>li>details:hover>summary]:after:opacity-100 class names to the <ul>. The first class sets 0 opacity to the chevron and the second class sets opacity to 1 when <li> is hovered.

Example: https://play.tailwindcss.com/oJd85fnJT7

[BenaliDjamel]

Thanks , that answers my question, but do you suggest something else other than nested dropdown to accomplish the job ?

[ankitoye]

Cleaner way - <summary className="after:content-none">{item.name}</summary>