قائمة افقية منسقة بـ CSS سي اس اس للتصفح
كود قائمة افقيو منسدلة css
السلام عليكم ورحمة الله وبركاته
أولا أعتذر للأخوة على التأخر في طرح الكود وهذا لأسباب خارجة من سيطرتي
أشد الاعتذار للأخ أحمد قدورة أرجو أن تقبل اعتذاري
بدون إطالة إليكم الكود
- الكود:
-
<style type="text/css">
.menu_bar{position:absolute;margin-top:-5px
}
.menu_bar a{
font-family:arial;
font-weight:500;
}
.menu_bar ul{
height:38px;
list-style:none;
margin:0;
padding:0;
}
.menu_bar li{
float:right;
width:9em;
}
.menu_bar li a{
color:#15AAE0;
display:block;
line-height:58px;
font-size:18px;
text-align:center;
text-decoration:none;
}
.menu_bar li a:hover{
background:#15AAE0 ;
color:#f4f4f4;
-moz-text-shadow: 4px 4px 4px #000;-webkit-text-shadow: 4px 4px 4px #000;filter: progid:DXImageTransform.Microsoft.Shadow(color='#848282',Direction=115,Strength=2);text-decoration: none;text-shadow: 4px 4px 4px black;zoom: 1;
}
.menu_bar li ul{
background:#e6e6e6;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:900px;
z-index:2000;
-webkit-border-radius: 1px;
-webkit-box-shadow: 0 0 20px #666;
/*top:1em;
/*left:0;*/
}
.menu_bar li:hover ul{
display:block;
}
.menu_bar li li {
display:block;
;
width:225px;
}
.menu_bar li ul a{
display:block;
font-size:14px;
font-style:normal;
height:30px;
line-height:30px;
padding:5px 10px 5px 15px;
text-align:left;
text-align:right;
color: black;
font-weight:bold;
margin:2px;
}
.menu_bar li ul a:hover{
background:#949494;
color:#f4f4f4;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu_bar p{
clear:left;
}
.menu_bar #menutitle a{
background:#000000;
font-weight:bold;
color:#FFF;
height:20px;
line-height:20px;
margin:2px;
}
.menu_bar #menutitle a:hover{
background:#000000;
font-weight:bold;
color:#FFF;
}
</style><div class="menu_bar" dir="rtl">
<ul>
<li><a href="/">المنتدى</a></li>
<li id="Bayanat"><a href="#hi">لوحة التحكم</a>
<ul style="margin-right:-110px">
<li id="menutitle"><a>بياناتي</a></li>
<li id="Nmsg"><a href="/privmsg?folder=inbox">صندوق الرسائل</a>
</li><li><a href="/privmsg?mode=post">ارسال رسالة جديدة</a>
</li><li><a href="/privmsg?folder=outbox">رسائل مرسلة لم تتم قرائتها</a>
<li><a href="/profile?mode=editprofile">تعديل بياناتي</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">تعديل التوقيع</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">تعديل الصورة الشخصية</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">تفضيلاتي</a></li>
</ul>
</li>
<li><a href="#hi">خيارات سريعة</a>
<ul style="margin-right:-227px">
<li id="menutitle"><a>استعــــرض</a></li>
<li><a href="/search?search_id=newposts">المواضيع الجديدة منذ آخر زيارة لي</a>
</li><li><a href="/search?search_id=egosearch">استعرض مساهماتي</a>
</li><li><a href="/search?search_id=unanswered">المواضيع التي لم أرد عليها</a>
<li><a href="javascript:mywindow=window.open('http://nwail.forum-pro.fr/statistics#3','','height=382,width=1000,top=120, left=10')">أكثر المواضيع نشاطا</a></li>
<li><a href="javascript:mywindow=window.open('http://nwail.forum-pro.fr/statistics#6','','height=382,width=1000,top=120, left=10')">أفضل الأعضاء لهذا الأسبوع</a></li>
<li><a href="/t1246-topic">مسابقة المنتدى</a></li>
<li><a href="/contact">راسل الإدارة</a></li>
</ul>
</li>
<li><a href="#hi">روابط ممــــيزة</a>
<ul style="margin-right:-344px">
<li><a target="_blank" href="/search?search_id=newposts">PhotoShop online</a>
<li><a target="_blank" href="/h14-page?membr=TranslateText/">ترجمة فورية</a>
</li><li><a target="_blank" href="/h10-page">زخرفة الأسماء والعبارات</a>
</li><li><a href="javascript:window.open('http://nwail.forum-pro.fr/h18-page','','height=382,width=800,top=120, left=120')">انضم للشات</a></li>
<li><a href="javascript:window.open('http://nwail.forum-pro.fr/h12-page','','height=382,width=800,top=120, left=120')">Chat with Alice</a></li>
<li><a target="_blank" href="/h14-page?membr=world-map/">Google earth</a></li>
<li><a target="_blank" href="/h5-page">ألعاب فلاش </a></li>
<li><a href="javascript:window.open('http://nwail.forum-pro.fr/h9-page','','height=422,width=800,top=120, left=120')">مركزتحميل الصور</a>
<li id="menutitle"><a href="/f89-montada">دعم منتديات </a></li>
<li><a target="_blank" href="/h2-page">مولد أكواد css</a>
<li><a href="/f19-montada">طلبات الأكواد</a></li>
<li><a target="_blank" href="/h14-page?membr=code/">محرر أكواد الـHTML</a></li>
</ul>
</li><li><a href="/login?logout=1">خروج</a></li>
</ul>
<span><a href="http://nwail.forum-pro.fr/" style="position:absolute;top:0;left:-4em">nwail</a></span> </div><div id="navbar-table" width="932px" dir="rtl">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td id="nav-right"><img src="http://i49.servimg.com/u/f49/15/69/37/39/nav-ri10.png" alt=""></td><td id="nav-menu" style=" background: #f4f4f4 url(http://i49.servimg.com/u/f49/15/69/37/39/nav-ba10.png) repeat-x; width: 100%;"></td><td id="navleft" width="9px"><img src="http://i49.servimg.com/u/f49/15/69/37/39/nav-le10.png" alt=""></td></tr></table></div>
وأفضل أن يوضع في الاعلانات الخاصة (يجب حذف كل الاعلانات الخاصة الأخرى)
(لا تنسو تعديل الروابط المناسبة )
أرجو أن يعجبكم
تقبلوا تحياتي bobo