JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-container">
			<div id="menu-parent">
				<div id="menu-parent-child" style="background-color: rgb(53, 35, 39);"></div>
				<div id="menu-bg" style="background-color: rgb(53, 35, 39);"></div>
				<div class="menu-selector" style="top: 75px; background-color: rgb(255, 0, 105);"></div>
				
				<ul class="block nav">
					<li class="current" style="left: 0px; top: 0px;"><a href="index.html">Menu 1</a></li>
					<li style="left: 0px; top: 0px;"><a href="about.html">Menu 2</a></li>
					<li style="left: 0px; top: 0px;"><a href="#">Menu 3</a>
						
					</li>
					<li style="left: 0px; top: 0px;"><a href="#">Menu 4</a>
						
					</li>
					<li style="left: 0px; top: 0px;"><a href="#">Menu 5</a>
					</li>
					<li style="left: 0px; top: 0px;"><a href="contacts.html">Menu 6</a></li>
				</ul>
				<!--end nav-->
			</div>
		</div>

CSS

.menu-selector {
	position: absolute;
	display: block;
	width: 2px;
	height: 36px;
	margin-left: 190px;
	margin-top: -3px;
	background: #ff0069;
}

JavaScript

/*---- Document Ready function ------------------------------------*/
$(function() { 
	/*----Defining Main style color for JS ----*/
	var style_color = $('.style-color-element').css('color');
	
	/*----Defining menu object variables----*/
	var menu = {
		main : $('.nav'),
		items : $('.nav li a:not(.sub-menu li a)'),
		subtitles : $('.nav li a span'),
		submenu : $('.sub-menu'),
		isopen : false,
		selector : $('.menu-selector'),
		easing : 'easeOutBack',
		anim_time: 500
	}
	
	/*----Defining other variables----*/
	/*----Initializing menu functionality----*/
	
	menu.init = function()
	{
		var nav = this;
		
		nav.items.each(function(i){
			$(this).parent('li').data( 'pos', i )
			$(this).parent('li').data( 'pos-top', $(this).parent('li').position().top )
		});
		
		if($('#nav-header-container').length <= 0)
		{
			nav.selector.css({
				'top' : $('.current').position().top + nav.main.position().top,
			});
		}else{
			setTimeout(function()
			{
				nav.selector.css({
					'top' : nav.items.eq(0).position().top + nav.main.position().top
				});
				
				nav.selector.stop().animate({
					'top' : $('.current').position().top + nav.main.position().top
					
				}, nav.anim_time, nav.easing)
			}, 100);
		}
		/*----Menu hover handler----*/
		
		nav.items.hover(function()
		{
			nav.selector.stop().animate({
				'top' : $(this).parent('li').position().top + nav.main.position().top
				
			}, nav.anim_time, nav.easing)
		});
		
		
		
	}
});









/*---- Logging function ------------------------------------*/