JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<ul class="menu">
<li><a>خانه</a></li><li><a>مطالب سایت ما </a></li><li><a>درباره ما</a></li><li><a>فرم تماس با ما</a></li><li><a>مجموعه مقالات سایت ما</a></li><li><a>محصولات ما</a></li>
<li id="upLine"></li>
</ul>

CSS

html {
	direction:rtl;
}
.menu {
	margin:30px auto;
	list-style:normal;
	position:relative;
	white-space:nowrap;
}
.menu li {
	display:inline-block;
	background-color:aliceblue;
	position:relative;
	z-index:3;
}
.menu li a {
	display:block;
	padding:7px 15px;
}
.menu #upLine {
	position:absolute;
	bottom:0px;
	top:-5px;
	display:block;
	background-color:#FF3300;
	z-index:1;
}

JavaScript

$(document).ready(function() {
$("#upLine").each(function() {
	var w = $(this).parent("ul").find("li:first-child").width();
	var w = w+"px";
	var p = $(this).parent("ul").find("li:first-child").position();
	var r = p.right;
	var r = r+"px";
	var l = p.left;
	var l = l+"px";
	$("#upLine").css({
	'width'	:	w,
	'right'	:	r,
	'left'	:	l,
	});
});
$(".menu li a").hover(function() {
	var w = $(this).parent("li").width();
	var w = w+"px";
	var p = $(this).parent("li").position();
	var r = p.right;
	var r = r+"px";
	var l = p.left;
	var l = l+"px";
	$("#upLine").animate({
	'width'	:	w,
	'right'	:	r,
	'left'	:	l,
	},500);
	
});
});