قائمة مزدوجة بشكل راقي مصممة بواسطة الCSS

السلام عليكم وعيدكم مبارك ,اليوم سنطرح قائمة مزدوجة بشكل راقي مصممة بواسطة الCSS

لاضافة القائمة نقوم بالذهاب الى القالب ثم تحرير HTML ثم البحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود ال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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiwL0fsRt0dl6_4z8Kpc4jERk_AIIPnFP82hnmhLmMLL0ki34-WS3xw7JnAiJcmTLuXaiTtDU8XJFSbATU-1cIrmSEKlVrZWf2vAY1K2esuliYq6fjt6j46Iut3kCJ3ZbmrcZ0v9_BtRA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Ep32uXDkAaolhdgEgI5Yvn61-mu4jPQNLLA3zPthwMDdUpaPCJnPS-iLuStBB4WfmycqjYjhPsOMzkCwsCukg1VIoYL6lkt8DjPPpaLA15FE9yqIPwQO6-IPqIRY4tFjWhmAuf-Mhfy3/s400/menu_button_grey.png) no-repeat;
width:169px;
height:42px;
float:right;
}
#Main-nav li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSenVrzPx1jZCgAJTxx0gO_XxHj_MoOFWuxBjYzkSaoA0mwiLk5Za_jQ4N-N0W_YVAybT6ibWnplvYUKH1yiAkGI97l2l04lLl6Tgm0drmV4d04cJxYnwP3whzy9G9K2fBtS-h4PJS1KUg/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSenVrzPx1jZCgAJTxx0gO_XxHj_MoOFWuxBjYzkSaoA0mwiLk5Za_jQ4N-N0W_YVAybT6ibWnplvYUKH1yiAkGI97l2l04lLl6Tgm0drmV4d04cJxYnwP3whzy9G9K2fBtS-h4PJS1KUg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLQeEJIdK-dHYNWPWaMjNCC5e2Sc8nwc4cpgj3xC4Dq5ZlC12KyFfMKab6AiuTCjitNfdl4dtBb2EEQUDhsAAi8ADW77g5J2uA75HSoWLVl-zuFX_7xFqrB-VBG-XkYx03KhDZbbZEBEs/s400/home_ico.png) no-repeat 30px 14px;
}
#mm-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5P0BydaMSin3SzoFdvO-Wywe1VouQdcJMSuCefjUFRBdYNxMlDh7p6OrGj2AQ4ygatV6mjHRVgSA8FkYxYXtVs-sYCgS_tKpR-YrAOcuArvPfLUsFc92B_lGgcnHi1xAF3Eis1R7rSxc/s400/make_money_ico.png") no-repeat 30px 14px;
}
#seo-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4et5V5A4oCI_uZSIFCaGYrWYOwHVSDRa3cM0mUhbd3Kif67FJiElWpxqQKbP24tYuIVGgJPGj5eZqBDvCQ0UopujxIZ-zaYIpFZt9DABIIfJ-x-gaKptG2UWEXihiWoIqec8xRfwwBe7/s400/SEO_ico.png") no-repeat  30px 14px;
}
#hosting-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWS8ftAflnn_1iyXSJPMhGZbNgn3_GOfW7hSdAXkP6UuRc41tIYFi2cT-pNFmOXVmU1OKr6_JEjduifcP10cyQrjvOY7m3HewyY_hwjgjpodJL4b8i1fhVGdX4f-RJE9ppfg3eKV8sAWm5/s400/web_hosting_ico.png) no-repeat  30px 14px;
}
#blogging-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsuA91_BrTtTvR6KTSBC3z7CEoHvH8_xs5DSQ-4ghpwJqzU55_wXUW_hp1v6cCcWTGDJQcFipFpMBwmlqcvfIYIw708lR8dQ1oJl4AMXE6Otk95hxJVmKQt_nC8XOIaPe7k29L_pw_VOq/s400/blogging_ico.png) no-repeat  30px 14px;
}
#widgets-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYpPB9p84f8Sx9cGw-nxUuFwWZ-giBFptWW648dXhyphenhyphene5NMvrt0jIOTfgCIu6gMHn2q8nS_660N5nyyR3tr4HI5-KStZXPwNGXzRnx2J2OgBSWhrKxh3w864RMZhBBpHsZUj7NbnAu9u2b/s400/templates_ico.png) no-repeat  30px 14px;
}
/*-----SECONDARY MENU-----*/
#secondary-Menu {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkunE03PE4qmDyM9zuVmqT0WIG5nlgJNJ-AJDjpCweEyjIAV9Q1NcXSPA9x_xp3eJYGyH1zfv4rMzdJzRyUiOxUlL6_PhQ3xEwPyJ8AlScZ9EURWeqDn-25TMQMS-vAESN9NM0lVh07Fa/s1600/Sub_menu_bg-optimized2.png") no-repeat scroll 0% 0% transparent;
width: 1015px;
height: 128px;
margin: 0px auto;
padding: 0px 0px 0px 17px;
position: relative;
right: 0px;
}
#secondary-nav {
margin: 10px auto;
padding: 0px;
}
#secondary-nav ul {
float: right;
list-style: none;
margin: 5px auto;
padding: 0;
}
#secondary-nav li {
list-style : none;
margin : 5px 0px 0px 0px;
padding : 0;
float : right;
}
#secondary-nav li a, #secondary-nav li a:link {
color: #B8B8B8;
display: block;
font-size: 12px; font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0 0 0 20px;
padding: 0px 0px 17px 20px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
}
#secondary-nav li a:hover {
color: #ddd;
text-shadow:1px 2px 1px #000;
}
#secondary-nav li ul {
position: absolute;
right: -999em;
width: 190px;
margin: 0 0 0 0px;
padding: 0;  z-index:99999; display:block;
}
#secondary-nav li:hover ul {
right: auto;
}
#secondary-nav li li {
margin:0px;
padding:0px;
border-bottom:1px dotted #3B3D3E;
background: #242729;
width: 190px;
}
#secondary-nav li li:hover {
background: #343637;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#secondary-nav li li a {
color: #B8B8B8;
display: block;
margin: 0;
padding: 7px 0px !important;
text-decoration: none;
}
#secondary-nav li li a:hover {
color: #FFF;
text-decoration: none;
}

الان لاضافة اكواد الHTML نذهب الى التخطيط ثم اضافة أداة ثم HTML/JavaScript
ثم نقوم بلصق كود ال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 style="float:left; margin-right:40px;">
   <ul>
    <li><a id='munuswe' href="http://sweup.com">«احصل عليها</a></li>
    </ul>
    </div>
     <script src='https://mununon.googlecode.com/svn/munu.js' type='text/javascript'/>
</div>

اقترح علي المهندس محمد جلال ان اقوم بعرض القائمة بالوان مختلفة ولكني سأقوم بتعليمكم الطريقة بالصور فهذا أفضل
1-نضع مؤشر الفاراة على المكان المراد تغير لونه في القائمة ثم نضغط على الزر الايسر للفاراة ثم نقوم بالضغط على فحص العنصر

2-ستظهر لنا أكواد HTML الخاصة بالقائمة على الجانب الايسر من الصندوق وفي المقابل اكواد الCSS في الجانب الايمن يمكننا من خلال اكواد الcss تغير لون خلفية العنصر وقد تكون الخلفية عبارة عن لون بصيغة HEXA او Rgp او تكون عبارة عن صورة كما هو الحال في مثالنا

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