Tailwind CSS multi level dropdown on hover-CodePudding

I have the below tailwind CSS code which is a single level drop down on hover. Looking for help on one more level of drop down i.e, by hovering on 1, should display 1.1,1.2,1.3 to right of 1 (in a flex-col). similarly for 2 and 3. Appreciate your help.

    <div >
      <div >
        <button
          
        >
          <span >Dropdown</span>
          <svg
            
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
          >
            <path
              d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
            />
          </svg>
        </button>
        <ul >
          <li >
            <a
              
              href="#"
              >1</a
            >
          </li>
          <li >
            <a
              
              href="#"
              >2</a
            >
          </li>
          <li >
            <a
              
              href="#"
              >3</a
            >
          </li>
        </ul>
      </div>
    </div>
  </body>

CodePudding user response：

You can use nested groups in tailwind v3.

read more about this -> tailwind docs.

like this:

<div >
  <div >
    <button >
      <span >Dropdown</span>
      <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
      </svg>
    </button>
    <ul >
      <li >
        <a  href="#">1</a>
        <ul >
          <li>1.1</li>
          <li>1.2</li>
          <li>1.3</li>
        </ul>
      </li>
      <li >
        <a  href="#">2</a>
      </li>
      <li >
        <a  href="#">3</a>
      </li>
    </ul>
  </div>
</div>

CodePudding user response：

Nested group hovers doesn't work in Tailwind. So you need to use either Tailwind labeled groups plugin or another solution in tailwind community.

By plugin it would be something like that : https://play.tailwindcss.com/zJnMxyGu6X