عدد مشاهدات الموضوع:
#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/AVvXsEi43escZutdBHdDwXZesoF7OQ7eARFN0dGUVYHzsrxArC4eRsjQ7twqrfJmznUBVv5RaCr55yRK7iSzZv-P2K1jP-aV36GynWK4rHD5G4eoRzOEmRBWhtgrvtySiV7CHH7V9c1g1S4_8VOa/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/AVvXsEgAJ4KynETQ2J40pibR8tgzBvI03fUnp1chO10JRG7XXBFOythHZoCeorCcAfllPWzWIngNhiTb9jGtLVw2pryfTg9i-UOZea-zwSItNoJ8x5Sd1eJc_cBhBMuuZfAwpWQp51PwLdHmqYuo/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/AVvXsEj4sGG203j44Tixj6JuYdbt6qlajj2mUajTKL22FvATQryVgD_lowVKbOxd44Okf3w0Il9Bvnyok8ORlVIqDUKsQQTrKshs3LaGsJpD_kP5ssINmgy8CWOVbsbse60rz1ysh3Efl2C5Emhw/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sGG203j44Tixj6JuYdbt6qlajj2mUajTKL22FvATQryVgD_lowVKbOxd44Okf3w0Il9Bvnyok8ORlVIqDUKsQQTrKshs3LaGsJpD_kP5ssINmgy8CWOVbsbse60rz1ysh3Efl2C5Emhw/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/AVvXsEitiAksOaXDow9epcnmAs3TFguz-frt-0va3j6yr7vlIkYMgRi_uKlL5I9-0DohQNEkueRVQPjMrxxtt0bOVGjLNfFdeOiq-k-7TNMLPGpqzpOfKQWzvqjDTWRI1utCe8iaV3oKsRL-Sz6m/s400/home_ico.png) no-repeat 30px 14px;
}
#mm-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0dbt5z7vTqQU5PjnQGzzyGweTG52nnAwDqMHvl7U06v1II24TtmGkrMsfbrgD6_CLGblWlnQbNAWeuHyTKiaTHwznmNEQ0hHbkEbPE2G98Ae3UZdQeiT8plxuMEwkHVYbGUbVY7GgXDy/s400/make_money_ico.png") no-repeat 30px 14px;
}
#seo-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJUYeIEvBJr-I9WVz6NOtdv0QSPs3RIznxPX5zLyZxj2h1gB1nRsH1Z_6i0EFDZ3I5F0TjvAtLkebLb23lRJKUByv_j_PSXL0hlfDlK7uJaAmtJ5n6NkpqsCm1IlSkGvV0XA_aWJADZtV/s400/SEO_ico.png") no-repeat 30px 14px;
}
#hosting-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyw-lqIRqol8N0pBimaH9SYyie2LjJ43QRuHrZhJXxMdfVrXdaD-xixV77STLePS9LFQOQ4ZRPyydCvTI9yK2dGr8WPmWmax16-4pK5uTKDHaMZuhNzZm3mnrus51J3BUaSr4f4a5n_JiZ/s400/web_hosting_ico.png) no-repeat 30px 14px;
}
#blogging-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-rIsFAMqDwy1MVnVub6sv7bxTwXp6EUeMXtZkQPl7g6Az9oyrPhEUtpPfEh1RUMZnI9d4fgbnHLs8RHnfVbIFqLVSpASJrJcQQuQ9wVdFQLeT1fGkwzHF56KUfAiqcOc6CwiRLAoTKcg/s400/blogging_ico.png) no-repeat 30px 14px;
}
#widgets-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdb17J2cBYXIGmYnbDdjFz4-kYiFzvcu_RlOZYIdsKXzEiL2_yfPhvmPxq6VZtoSLTZfQrHAXjdU2OTdn6tu6HQGhHL05GwzyoB-qJA3ftWWJHpGycMkFS9c8mEU6Og8S02OwrxmgI24bB/s400/templates_ico.png) no-repeat 30px 14px;
}
/*-----SECONDARY MENU-----*/
#secondary-Menu {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DsOmgoOOF0l6GAPq-xsY8o57MFDQ-KdaUKksD7Y1eebpoer_D2LSf_eOIVOKucut7BJ9ytI3QJj0_WIxv4piLUehlKiku0YVmmBxnWr7rNT4lwzTZS7_6fdffR49FUiF-JsVVIqyOAGP/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 التالي ونغير المسميات كما نشاء ونغير الروابط بما نشاء
/*-----القائمة الرئيسية-----*/
<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- نضع مؤشر الفاراة على المكان المراد تغير لونه في القائمة ثم نضغط على الزر الايسر للفاراة ثم نقوم بالضغط على فحص العنصر
الى هنا اترككم فر رعاية الله وحفظه, يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .
السلام عليكم ممكن شرح اضافة التعليقات دى وشكرا
ردحذفhttp://up.ahmad-wd.com/do.php?imgf=141243625712851.jpg