JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div class="menu"  >
<div id="pop" >
<ul >
<li><a href="index.php">الرئيسيه</a></li>
<li><a href="news.php">الاخبار</a></li>
<li><a href="index.php">عن الجمعيه</a>
    <ul>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a>
        </li>
    </ul>
</li>
<li><a href="index.php">التقارير</a></li>
<li><a href="us.php">من نحن</a></li>
<li><a href="index.php">اتصل بنا</a></li>
</ul>
</div>

CSS

#pop ul {list-style-type: none; font-weight:bold;}
#pop, #pop li ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#pop li {
 float: right;
 margin: 0;
 padding: 0;
 position: relative;
}
#pop li li {
 float: right;
 width: 140px;
 margin: 0;
 padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
 text-decoration: none;
 display: block;
 padding: 5px 15px;
}
#pop li a:hover, #pop li a:active {
    background-image:url(imgs/hoverefect.png);
 /*color: #FFF;*/
 display: block;
/* background: #2583AD;*/
 padding: 5px 12px;
  border-radius: 2px;
 -webkit-text-shadow:2px 2px 3px rgb(244,195,78);
-moz-text-shadow:2px 2px 3px rgb(244,195,78);
text-shadow:2px 2px 3px rgb(244,195,78);
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
/* background: #D2DDE4;*/
 width: 80px;
 margin: 0;
 padding: 5px 12px;
 border-top: 1px solid #FFF;
}
#pop li li a:hover, #pop li li a:active {
background-image:url(imgs/hoverefect.png);
}
#pop li ul {
 position: absolute;
 width: 199px;
 display: none;
 right: 0;
}
#pop li:hover ul {
 display: block;
 z-index:300;
 position: absolute;
}