JSFiddle - React, Tailwind, and code Playground

by Nasser Tabook

HTML

<ul id="main-nav">
                        <li><a href="Contacts.aspx">الرسائل</a></li>
                        <li><a href="#"><span>أسئلة المسابقة</span></a>
                            <ul>
                                <li><a href="quize.aspx">إضافة سؤال جديد</a></li>
                                <li><a href="quise_list.aspx">قائمة الأسئلة</a></li>
                                <li><a href="quize_guests.aspx">إختيار الفائزين</a></li>
                                <li class="separation-menu"></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>الفئات</span></a>
                            <ul>
                                <li><a href="addcataspx.aspx">إضافة فئة جديدة</a></li>
                                <li><a href="EditCats.aspx">تعديل الفئة</a></li>
                                <li class="separation-menu"></li>
                            </ul>
                        </li>
                        <li><a href="addFeatures.aspx"><span>الدعايات/الإعلانات</span></a>
                            <ul>
                                <li><a href="AddBottomBar.aspx">دعايات/صور أسفل الصفحة</a></li>
                                <li><a href="EditCats.aspx">تعديل الفئة</a></li>
                                <li class="separation-menu"></li>
                            </ul>

                        </li>
                        <li><a href="AddUsers.aspx"><span>المستخدمين</span></a></li>
                        <li><a href="ImgFolders.aspx"><span>مجلدات الصور</span></a></li>
                        <li><a href="websettings.aspx"><span>التضبيطات</span></a></li>
                        <li><a href="#"><span>المقالات</span></a>
                            <ul>
                                <li><a href="postlist.aspx">قائمة المقالات</a></li>
                                <li><a href="addpost.aspx">إضافة مقالة جديدة</a></li>
                                <li...

CSS

ul#main-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#main-nav li{
    display:block;
    position:relative;
    float:right;
}
ul#main-nav li ul{
    display:none;
}
ul#main-nav li  a{
display:block;
text-decoration:none;
color: rgb(255, 255, 255);
border-top: 1px solid #888;
padding: 5px 15px;
background-color: #2c6463;
margin-right: 1px;
white-space: nowrap;
}
ul#main-nav li a:hover {
    background: #617f8a;
}
ul#main-nav li:hover ul {
    display: block;
    position:absolute;
}
ul#main-nav li:hover li {
    float: none;
    font-size: 11px;
}
ul#main-nav li:hover a{background-color:#617f8a;}
ul#main-nav li a:hover {background-color:#95a9ba;}