JSFiddle - React, Tailwind, and code Playground

by alaa13212

HTML

<div id="menu">
    <ul>
        <li><a href="#" title="">وصلة</a></li>
        <li><a href="#" title="">وصلة</a></li>
        <li><a href="#" title="">وصلة</a></li>
        <li><a href="#" title="">المزيد</a>
            <ul>
                <li><a href="#" title="">وصلة</a></li>
                <li><a href="#" title="">وصلة</a></li>
                <li><a href="#" title="">وصلة</a>
                    <ul>
                        <li><a href="#" title="">وصلة</a></li>
                        <li><a href="#" title="">وصلة</a></li>
                        <li><a href="#" title="">وصلة</a></li>
                        <li><a href="#" title="">المزيد</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">المزيد</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

body, ul, li{
            padding:0;
            margin:0;
            direction:rtl;
        }
        #menu {
            background : rgb(65, 65, 65);
            float:right;
            width:100%;
        }
        #menu ul {
            list-style : none;
            background : rgb(45, 45, 45);
        }
        #menu li {
            display : inline-block;
            float : right;
            position:relative;
        }
        #menu li ul{
            display: none;
            position: absolute;
            top:34px;
            right:0;
            width:9em;
        }
        #menu li ul li ul{
            display: none;
            position: absolute;
            top:0;
            right:9em;
            width:9em;
        }
        #menu li ul li{
            display:block;
            width:100%;
            pading:3px;
        }
        #menu li:hover > ul{
            display:block;
        }

        #menu a {
            display : block;
            padding : 7px 7px;
            text-decoration : none;
            color : rgb(221, 221, 221);
        }
        #menu a:hover {
            background : rgb(76, 76, 76);
            color : rgb(255, 255, 255);
        }

JavaScript

/*
 *
 * قائمة منسدلة بدون javascript
 *
 */