قائمة منسدلة احترافية CSS3 لموقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم

السلام عليكم ورحمة الله وبركاته .

قائمة منسدلة احترافية CSS3 لموقعك

قائمة جميلة اخذتها من احد القوالب الاجنبيه وقمت بتعريبها , القائمة تتميز ببميزات عدة منها انها خفيفة وجميلة المنظر , وايضاَ تم اضافة خط عربي احترافي لها وهو الخط المشهور : DroidKufi-regular  .

صورة : 

مثال مباشر : من هنا .

طريقة التركيب : 

• طبعا طريقة التركيب تختلف من قالب لقالب , يعني انت وشطارتك في الاكواد ): ابحث عن مكان مناسب لها مثلاَ تحت الهيدر , او اي مكان تشاء , وهذا الكود كامل وجاهز :

<div id="menu">
<ul>
<li><a class="mhome" href="http://blog.7lolblogger.com/"></a></li>
<li><a href="http://blog.7lolblogger.com/">تكنولوجيا</a></li>
<li><a href="http://blog.7lolblogger.com/">ويندوز<i class="icon-me"></i></a>
<ul>
<li><a href="http://blog.7lolblogger.com/">مشاكل وحلول</a></li>
<li><a href="http://blog.7lolblogger.com/">تحديثات</a></li>
<li><a href="http://blog.7lolblogger.com/">أخبار</a></li>
<li><a href="http://blog.7lolblogger.com/">ثيمات</a></li>
</ul>
</li>
<li><a href="http://blog.7lolblogger.com/">حماية</a></li>
<li><a href="http://blog.7lolblogger.com/">برمجة</a></li>
<li><a href="http://blog.7lolblogger.com/">برامج</a></li>
<li><a href="http://blog.7lolblogger.com/">مواقع</a></li>
<li><a href="http://blog.7lolblogger.com/">العاب</a></li>
<li><a href="http://blog.7lolblogger.com/">مقالات</a></li>
</ul>


  <style>
/*------menu D: blog.7lolblogger.com ------*/
#menu{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIudVFu9eMjb95x2dU78ia2fAqx4s4R1ou4RFd03ihuZH3DUGT5VW4oN42CfBnKoh0jpclWFJ8I98Xf3Z-AbJe8pdCOlX6m6rZfZKYNSI0Vm81ySEw_XwugkRO335Rs0GSV4ZmQsqVefk/s1600/menu-bg.png')repeat-x ; width:100%; min-height:52px;border-bottom: 4px solid #ff4629; }
#menu ul{line-height: 52px;}
#menu ul li{display:inline;padding: 17px 0px;}
#menu ul li a{padding:10px 13px 10px 17px;color:#ddd;font: 14px DroidKufi-regular,tahoma;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxvLEAmTaMuEPT452dF9ZaZj9yMZuGfk8xYDn0BwgH5BmJ89ictw5MP6Mp99fWfQ9aUFgMQpdODRRq74sXLgYY7L_SV_RKPSPf-XaXLH1WHa3eb88Z1BvdH4BcI7QxwOOMtaJk94V_LU/s1600/border.png');background-repeat: no-repeat;background-position:left;}
#menu ul li a:hover{color:#fff;transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;-o-transition: all 0.5s;}
#menu ul li .mhome{padding: 16px 28px 16px 28px;
background-color:#ff4629;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQhfUBBX9GlzmcXqvjooLcRlMGylwSFCxczpFaVWGdiFJuJOcP4SMB1s332s-phhQi6o1mxjqNJ6bFTfyuvYD8818UE14oumuGkeK37KxMmkQ7kZNwrviIdeYEDTK81RwxM_-9Cvb6aEA/s1600/home.png');
background-repeat: no-repeat;
margin-right: 10px;
background-position: 11px 10px;}
.icon-me{padding: 0px 10px 0px 10px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglFhQnV8Nh_KAeRowLgqvNA8be96CDLTxKyhARR4Z2skX_sCxpa6R0KdikDSbG0UyhlLo_HIZAANlNn84iKUzC59mLXSzSMdhM5Rcj0HQHBZha1J0bP6h0XLW-vYdSn_Aj7KoH_oB2FJU/s1600/arrow-down.png') no-repeat;
background-position: 0px 7px;}
#menu li ul{display: none;line-height: 37px;margin-top: 3px;
z-index: 9999;margin-right: 151px;
position: absolute;border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
width: 160px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dqIci_-hEJ_WocJRgQO59x_0ZMkcUQRr3RHioYM5kxQJhrI8Mc3ctVDrORSgfkVlHyPOm6_NeO2qPbsz-OsiqVp1droXLyCSaK7HbvKXIWKA6oiKHN2hJ_mnm47YsI7nopGdTVAM8mk/s1600/submenu-bg.png');
background-repeat: repeat-y;}
#menu li:hover ul{display:block;}
#menu li ul li{display:block;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBDJ3uZyK_PdFrcfi6lZDhyphenhyphentmDRWXAfWXYLBBj1pM6HJqNo_R9cXjhALaIKULTjR_3mlVo_Qr-uhLmG06VFlYbr7jKA94ZbzkFu0N1MF66prgE3LI70TVGERPuJEeVOZKpZu3UdmjB_U/s1600/subborder-bg.png');
background-repeat: no-repeat;background-position:bottom;padding:0;}
#menu li ul li a{background-image:none;padding: 0px 15px 0px 0px;color:#ddd;font: 13px DroidKufi-regular,tahoma;transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
#menu li ul li:hover a{color:#fff; margin-right:5px;}

@font-face {
font-family: "DroidKufi-regular";
font-style: normal;
font-weight: 400;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf") format("truetype");
}
body {
padding: 0;
margin: 0;
direction: rtl;
font-family: DroidKufi-regular,arial,helvetica,clean,sans-serif;
font-size: 14px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
min-height: 100%;
_height: 100%;
position: relative;
}
* {
margin: 0;
padding: 0;
}
a:visited {
color: #868686;
}
a:hover {
color: #FF4629;
}
a {
text-decoration: none;
color: #868686;
}</style>
</div>

بالتوفيق