JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul class="menu">
		<li>
			<a href="#">Lista 1</a>
			<ul class="submenu">
				<li>
					<a href="#">Lista 1.1</a>
				</li>
				<li>
					<a href="#">Lista 1.2</a>
            <ul class="submenu">
              <li>
                <a href="#">Lista 1.2.1</a>
              </li>
              <li>
                <a href="#">Lista 1.2.2</a>
                  <ul class="submenu">
                    <li>
                      <a href="#">Lista 1.2.2.1</a>
                    </li>
                  </ul>
              </li>
            </ul>
				</li>
				<li>
					<a href="#">Lista 1.3</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Lista 2</a>
			<ul class="submenu">
				<li>
					<a href="#">Lista 2.1</a>
				</li>
				<li>
					<a href="#">Lista 2.2</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

CSS

ul{
	list-style: none;
	text-align: center;
}

a{
	text-decoration: none;
}

.menu{
	border: 5px solid greenyellow;
	padding: 0;
	margin: 20px;	
	position: absolute;
}

.menu li{
	border: 2px solid green;
	display: inline-block;	
	margin: 0;
}

.submenu{
	display: none;
	margin: 0;
	border: 2px solid black;
}

.submenu li{
	display: block;
	position: relative;
}

/*
 * o seletor foi alterado... adicionei o > no seletor
 * para não alterar submenus de submenus (senão ele mostra
 * todos os submenus quando passa o mouse em um)
 */
.menu li:hover > .submenu{
	display: block;
	border: 2px solid red;
	padding: 0; 
}


/* propriedades adicionadas */
.menu > li{
  position: relative;
}

.submenu{
  position: absolute;
}

.submenu > li{
  white-space: nowrap;
}

.submenu .submenu{
  top: 0;
  left: 100%;
}