JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li>
   	<a href="#">A ></a>
      <ul>
         <li><a href="#">A1 ></a>
              <ul>
                 <li><a href="#">A1A ></a>
                      <ul>
                         <li><a href="#">A1A1</a></li>
                         <li><a href="#">A1A2</a></li>
                      </ul>
                  </li>
                 <li><a href="#">A1B</a></li>
              </ul>
          </li>
         <li><a href="#">A2</a></li>
      </ul>
   </li>
   <li><a href="#">B</a></li>
</ul>

CSS

ul li > ul{
    display:none;
}

ul li:hover >ul{
    display:block;
}