JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div id="menu">
<ul class="top-menu">
 <li><a href="#">صفحه اصلی</a></li>
 <li><a href="#">ارسال مطلب</a></li>
 <li><a href="#">درباره ما </a>
	 <ul>
		 <li><a href="#">درباره ما</a></li>
		 <li><a href="#">تماس با ما</a></li>
	 </ul>
 </li>
</ul>
</div>

CSS

html {
	direction:rtl;
}
.top-menu {
	list-style:none;
	background:#2EB8B8;
}
.top-menu>li {
	position:relative;
	display:inline-block;
	white-space:nowrap;
	padding:0;
	margin:0;
}
.top-menu li a {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#333;
	background:#33CCCC;
}
.top-menu li a:hover {
	background:#97E6E6;
}

.top-menu ul {
	display:block;
	position:absolute;
	z-index:999;
	margin-top:-5px;
	margin-right:-10px;
}
.top-menu ul li {
	display:list-item;
	list-style:none;
	width:140px;
}

JavaScript

$(".top-menu ul").hide();
	$(".top-menu>li").hover(function() {
	$(this).find("ul").slideDown(500);
	},function() {
	$(this).find("ul").slideUp(500);
	});