JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-nav">
    <ul>
    <li>
    <a href='#' id='drop-down'>قائمة</a>
    <ul>
    <li><a href="#">عن الموقع</a></li>
    <li><a href="#">اتصل بنا</a></li>
    <li><a href="#">المدونة</a></li>
    <li><a href="#">اضف كتابا</a></li>
    <li><a href="#">انضم لنا</a></li>
    </ul>
    </li>
    </ul>
    </div>

CSS

ul,li {
        list-style-type: none;
    }
    #top-nav ul li{
    width: 100px;
    position:relative;
    }
    #top-nav>ul>li a{
        width: 100%;
        display:block;
         color: #fff;
         padding:5px;
          background-color: #000;
        text-decoration: none;
    }
  
    #top-nav>ul>li>ul{
    position:absolute;
    right:0px;
    display:none;
    }

JavaScript

$(document).ready(function($) {

    $('#drop-down').on('click',function(event){
        event.preventDefault();
    $this = $(this);
    $this.siblings('ul').slideToggle();
    })
    });