JSFiddle - React, Tailwind, and code Playground
by abdallha dagga
HTML
<ul id="navigation-1">
<li><a href="#" title="Home">الرئيسية</a></li>
<li><a href="#" title="تعديل">تعديل</a>
<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>
<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>
<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<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>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a>
<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
<li><a href="#" title="تعديل">تعديل</a>
<ul class="navigation-2">
<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>
<ul class="navigation-2">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل <span>«</span></a>
<ul class="navigation-3">
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
<li><a href="#" title="تعديل">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
div#container
{ width:740px; position:absolute; right:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ background: #b9121b;margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:right; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-right:1px solid #ffffff; border-left:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; right:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:right; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:right; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:right;...