قائمة افقيه انيقه 6 ألوان متناسقه مع جميع الشاشات بتقنية CSS3

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف خلق الله سيدنا محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله , وتحية طيبه اخواني .
قائمة افقيه بستة 6 الوان وبشكل انيق مدعمة بتقنية CSS3 والتي بدورها جعلت من القائمة اكثر جاذبية , واكثر مايميزها انها داعمه لجميع الشاشات منها شاشات الموبايلات والايباد والايفون وغيرها من الاجهزه اللوحيه .

مميزاتها :

خفيفه .
متناسقه مع جميع الشاشات + شاشات الموبايلات ( خاصية responsive )
انيقة .
شكل جذاب .
قائمة منزلقة .
6 الوان .

الشكل الاول : الازرق + صورة :

انسخ الكود والصقه في اداة جافا\هتمل .

<div class="container">
             <ul id="nav"> 
<li class="active"><a href="#"><span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">الرئيسيه</a></li>
 
<li><a href="#"><span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">أدوات وفهارس </a>                                         <ul class="subs"> 
<li>
<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">أدوات مفيدة
                             <ul> 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_6291.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">فوتوشب اونلاين عربي</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_9054.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">add to blogger button generator</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_22.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">اكواد الالوان</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_2516.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">محول الأكواد</a></li>
                             </ul>
                         </li>
 
<li>
<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">فهارس المدونة
                             <ul> 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_26.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">فهرس مواضيع المدونة </a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_6574.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">فهرس دورة بلوجر " تعلم لكي تتقن " </a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_5.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">فهرس سلسلة دروس لتسريع الموقع</a></li>
                             </ul>
                         </li>
                     </ul>
                 </li>
 
<li><a href="#"><span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">اسخن المواضيع</a>                                         <ul class="subs"> 
<li>
<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">قوالب
                             <ul> 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/07/Template-Blog-7loll-blogger-with-nice-features-White-Silver.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">قالب مدونة حلول بلوجر</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/07/yousif-web-template-professional.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">قالب مدونة يوسف ويب  </a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/07/JPstation-Blogger-Template-arabic.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">قالب JPstation الرائع معرب</a></li>
                             </ul>
                         </li>
 
<li>
<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">إضافات
                             <ul> 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/07/google-plus-comments-on-custom-blogger-templates.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">الطريقة الصحيحه لتمكين تعليقات قوقل بلس في بلوجر</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/05/menu-under-navbar-beautiful-for-blogger.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">قائمه تحت الناف بار بشكل خرافي لمدونة بلوجر</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/05/blog-post_12.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">								<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">إضافة أداة المتابعة عبر الشبكات الإجتماعية ( مع 								عدد المتابعين )</a></li>
                             </ul>
                         </li>
                     </ul>
                 </li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/2013/01/blog-post_26.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">				<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">اعلن معنا</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_2.html"><span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">سياسة  <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">				<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">الخصوصية</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_29.html"><span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">اتصل 				بنا</a></li>
 
<li><a href="<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: rgb(0, 255, 255);">http://7loll.blogspot.com/p/blog-page_17.html"> <span class="Apple-tab-span" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; white-space: pre;">				<span style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif; font-size: 12px; line-height: 19.1875px; text-align: left; background-color: yellow;">الدعم الفني</a></li>
             </ul>
         </div>
 <style> /* menu by 7loll.blogspot.com */ /* common and top level styles */ #nav span {     display: none; } #nav, #nav ul {     list-style: none outside none;     margin: 0;     padding: 0; } #nav { background-color: #444; border-bottom: 3px solid #01B4FF; float: right; position: relative; width: 99.8%; margin: 0 auto; } #nav ul.subs { background-color: #FFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #666; display: none; left: 0; padding: 5px; position: absolute; top: 47px; width: 96%; } #nav > li {     border-bottom: 5px solid transparent;     float: right;     margin-bottom: -5px;     text-align: right;     -moz-transition: all 300ms ease-in-out 0s;     -ms-transition: all 300ms ease-in-out 0s;     -o-transition: all 300ms ease-in-out 0s;     -webkit-transition: all 300ms ease-in-out 0s;     transition: all 300ms ease-in-out 0s; } #nav li a {     display: block;     text-decoration: none;     -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     white-space: normal; } #nav > li > a { color: #F3F3F3; display: block; font-size: 1.3em; line-height: 49px; padding: 10px; border-left: 1px solid #555; -webkit-box-shadow: 1px 0px #333 inset; -moz-box-shadow: 1px 0px #333 inset; -khtml-box-shadow: 1px 0px #333 inset; -o-box-shadow: 1px 0px #333 inset; -ms-box-shadow: 1px 0px #333 inset; box-shadow: 1px 0px #333 inset; font: 17px tahoma,'Open Sans',sans-serif; } #nav > li:hover > a, #nav > a:hover {     background-color: #F55856;     color: #333; } #nav li.active > a {     background-color: #01B4FF;     color: #FFFFFF; } /* submenu */ #nav li:hover ul.subs {     display: block; } #nav ul.subs > li {     display: inline-block;     float: none;     padding: 10px 1%;     vertical-align: top;     width: 33%; } #nav ul.subs > li a { color: #06C; line-height: 20px; border-right: 3px solid #F55856; border-bottom: 1px solid #F3F3F3; margin: 2px; padding-right: 5px; } #nav ul li a:hover {     color: #F55856; } #nav ul.subs > li > a {     font-size: 1.3em;     margin-bottom: 10px;     text-transform: uppercase; } #nav ul.subs > li li {     float: none;     padding-left: 8px;     -moz-transition: padding 150ms ease-out 0s;     -ms-transition: padding 150ms ease-out 0s;     -o-transition: padding 150ms ease-out 0s;     -webkit-transition: padding 150ms ease-out 0s;     transition: padding 150ms ease-out 0s; } #nav ul.subs > li li:hover {     padding-left: 15px; }     /* responsive rules */ @media all and (max-width : 980px) {     #nav > li {         float: none;         border-bottom: 0;         margin-bottom: 0;     }     #nav ul.subs {         position: relative;         top: 0;     }     #nav li:hover ul.subs {         display: none;     }     #nav li #s1:target + ul.subs,     #nav li #s2:target + ul.subs {         display: block;     }     #nav ul.subs > li {         display: block;         width: auto;     } } </style>

المصدر : مدونه حلول