JSFiddle - React, Tailwind, and code Playground
by abdallha dagga
HTML
<div id="Main-Menu">
<ul id="Main-nav">
<li><a href="#" id="home-icon"> الرئيسية</a></li>
<li><a href="#" id="mm-icon">الربح من الانترنت</a></li>
<li><a href="#" id="seo-icon">سيو</a></li>
<li><a href="#" id="hosting-icon">خدع</a></li>
<li><a href="#" id='blogging-icon'>بلوجر</a></li>
<li><a href="#" id="widgets-icon">اضافات</a></li>
</ul>
</div>
<div id="secondary-Menu">
<div style="float:right; margin-right:40px;">
<ul id="secondary-nav">
<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>
<li>
<a href="#">تواصل معي</a>
</li>
<li><a href="#">أعلن لدينا</a>
</li>
<li><a href="#">«أدوات</a>
<ul>
<li><a href="#">HTML محرر</a></li>
<li><a href="#">تشفير الاكواد</a></li>
<li><a href="#">محرر الالوان</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#navbar-iframe { height:0px; visibility:hidden; display:none }
body {
background: #ddd;
color: #333;
font-family: Verdana, arial;
font-size: 12px;
margin: 0 auto 0;
padding: 0;
}
#Main-Menu {
background : url(http://1.bp.blogspot.com/-WNOyERoBFC4/UPlmmcC8_ZI/AAAAAAAAIqs/ffPwg_ygYp8/s1600/Menu_bg-op.png) no-repeat;
width : 1018px;
height : 70px;
margin : 0 auto;
padding : 0px 0px 0px 0px;
}
#Main-nav {
margin : 0px 0px 10px 15px;
padding : 10px;
}
#Main-nav ul {
float: right;
list-style: none;
margin: 10px auto;
padding: 0;
}
#Main-nav li {
list-style: none;
margin: 17px -10px 0px 0px;
padding: 0;
background:url(http://3.bp.blogspot.com/-Yue9g26W_kE/UPlmnMHH_wI/AAAAAAAAIq4/kHrlraqVIAw/s400/menu_button_grey.png) no-repeat;
width:169px;
height:42px;
float:right;
}
#Main-nav li:hover {
background: url(http://2.bp.blogspot.com/-acehrp762JE/UPlmn4EXGLI/AAAAAAAAIrE/hFL8KauLqoo/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight {
background: url(http://2.bp.blogspot.com/-acehrp762JE/UPlmn4EXGLI/AAAAAAAAIrE/hFL8KauLqoo/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight a {
color: rgb(51, 51, 51) !important;
text-shadow: 1px 2px 1px #9E9E9E !important;
font-size: 12px !important;
font-family: arial;
font-weight: bold;
text-transform: none;
}
#Main-nav li a{
color: #FFF;
display: block;
font-size: 12px;
font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 15px 0px 9px 60px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
letter-spacing:0.09em;
}
#Main-nav li a:hover {
color: #333;
text-shadow:1px 2px 1px #9E9E9E;
}
#home-icon{
background: url(http://4.bp.blogspot.com/-odPvT_4oL4s/UPlp4nRih3I/AAAAAAAAIrw/fk-jI_W3tR0/s400/home_ico.png) no-repeat 30px 14px;
}
#mm-icon{
background: url("http://3.bp.blogspot.com/-3mOWLHfTEpk/UPlp5TE6tAI/AAAAAAAAIr8/fnyooBgWCwY/s400/make_money_ico.png") no-repeat 30px 14px;
}
#seo-icon{
background:...