JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation_desktop">

	<div class="button">1.0 Main Menu
		<div class="FadeItem">
			<ul>
				<li>1.1 Sub Menu </li>
				<li class="button">1.2 Sub Menu
					<div class="FadeItem">
						<ul>
							<li>1.2.1 Sub Menu</li>
							<li>1.2.2 Sub Menu</li>
						</ul> 
					</div>
				</li> 
			</ul>
		</div>
	</div>
</div>

CSS

.button {
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

.FadeItem {
display: none
}

.FadeItem .FadeItem {
position: absolute;
left: 100%;
top: 0;
width: 130px;
height: 100%;
}

JavaScript

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});