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

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

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

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

 احترافية CSS3 لموقعك

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

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

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

<div id="menu">
<ul>
<li><a class="mhome" href="http://blog.7lolblogger.com/"></a></li>
<li><a href="http://the6professional.blogspot.com/">تكنولوجيا</a></li>
<li><a href="http://the6professional.blogspot.com/">ويندوز<i class="icon-me"></i></a>

<ul>
<li><a href="http://the6professional.blogspot.com/">مشاكل وحلول</a></li>

<li><a href="http://the6professional.blogspot.com/">تحديثات</a></li>

<li><a href="http://the6professional.blogspot.com/">أخبار</a></li>

<li><a href="http://the6professional.blogspot.com/">ثيمات</a></li>

</ul>
</li>
<li><a href="http://the6professional.blogspot.com/">حماية</a></li>

<li><a href="http://the6professional.blogspot.com/">برمجة</a></li>

<li><a href="http://the6professional.blogspot.com/">برامج</a></li>

<li><a href="http://the6professional.blogspot.com/">مواقع</a></li>

<li><a href="http://the6professional.blogspot.com/">العاب</a></li>

<li><a href="http://the6professional.blogspot.com/">مقالات</a></li>

</ul>


  <style>
/*------menu D: http://the6professional.blogspot.com/ ------*/
#menu{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-ZMz0a-_5fi3VewuWcD-Su2_jg1bIN06o7C29TI3NQfcHLPUIMGmX4SHUKHo5bo6PQDt1fFVi61JV84VN5WBZ1ZuIynUHgkLmwwi9b3kiwGrJC5p7krmZX6BWPKoilsXLz04sPmxnc4/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/AVvXsEjXef6cLQjbPU-ZCmrssQhcORrvSmC4YpNMqFEGwoYklbAlq6lhOHfylXTlN-r1bgCH_vfw7QjWNK0diMYuM-DeFZO7o-63vlVcI8UMZt3TkD0CJqUkeQdXbdfnNXvvodl03-KWYOREuKA/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/AVvXsEgDEOam22-46nHi-eHO4zwsahBU6V0Mbg2YpmyxQJrolIUvcslM_dxByxewE7oXEe039ldgbhzAMMKbk3vtajfZTA_Ge_IrJoIJTJoUv1L9yKb76A3ToqR4YMQDLQ5pthQ-vuw4GQAIITY/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/AVvXsEjZcxCYaPTLYBkbLZSld5lsxpn4BfMuMbOIO_j9pbm-UJwK3LGmhOfpGIAFnIt46u5_sc4CNBcDX8GlvOdF_FxBbT-tZYCnaM7xeBI4H20Y51h55SgDuqPQ2Qf7_NvgnbGnrYlI_cg61t4/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/AVvXsEjx6xG5h4dR4YSEhvYD1VH8DmxT5OdKdcXJcZuj6NQ-qbDscmwqrsv2CALUucfUI4bWIDfplccuRfKhGvvh1pVtyFbOXWEi5_y5NGiQoeDGUPuegovAwMzPzADnFnDPXlSvPH6nTMUj-Q0/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/AVvXsEgsnoaWKjfpbSCxAYww3zhaYt0PTg92Z9INGBTYO1u1pq8ovX1M5OsHXVNtsdqNzV4i0MWdIGVpn1c8xqa8xU-kQYy7s48ULPcd5sYZaozly5SUK6duOJPVnfxHmUnKySAJc2NCuUmHK78/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>

بالتوفيق