اريد كود لصفحات html

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها

الكود:



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><style type="text/css">
.menuhomeblog7 {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(173,255,47));
background-image: -webkit-linear-gradient(-90deg, rgba(2173,255,47), rgba(173,255,47));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(173,255,47), rgba(173,255,47));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuhomeblog7 ul.nav li {display:inline-block; display:inline;}
.menuhomeblog7 ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuhomeblog7 ul.nav li {float:right; display:block; padding:0 4px;}
.menuhomeblog7 ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuhomeblog7 ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}
.menuhomeblog7 ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuhomeblog7 ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div {position:absolute; top:40px; right:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuhomeblog7 ul.nav div.right {right:auto; left:4px;}
.menuhomeblog7 ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div ul.colright {margin-right:10px;}
.menuhomeblog7 ul.nav div ul.colleft {margin-left:10px;}
.menuhomeblog7 ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}
.menuhomeblog7 ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuhomeblog7 ul.nav div ul li:last-child {border:0;}
.menuhomeblog7 ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 15px 4px 0; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}
.menuhomeblog7 ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuhomeblog7 ul.nav div.col1 {width:160px;}
.menuhomeblog7 ul.nav div.col2 {width:310px;}
.menuhomeblog7 ul.nav div.col3 {width:460px;}
.menuhomeblog7 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
     
    <div class="menuhomeblog7">
         
        <ul class="nav">
             
            <li>
                 <a class="top-a" href="#url"><strong>الرئيسية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>بلوجر</strong></a>
                <div class="col3">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">إضافات بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">أعمالي</a>
                        </li>
                         
                        <li>
                             <a href="#url">دروس بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">سيو</a>
                        </li>
                         
                        <li>
                             <a href="#url">قوالب بلوجر</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="col">
                         
                        <li>
                             <a href="#url">تدوينات مهمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">آخر المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">مشاركات شائعة</a>
                        </li>
                         
                        <li>
                             <a href="#url">شات المدونة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">قائمة التصفح</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الجانبية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الأفقية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة العمودية</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>موقع SEO </strong></a>
                <div class="col2">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">هيدر</a>
                        </li>
                         
                        <li>
                             <a href="#url">فوتر</a>
                        </li>
                         
                        <li>
                             <a href="#url">المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">موبايل </a>
                        </li>
                         
                        <li>
                             <a href="#url">عروض الموبايلات</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل seo</a>
                        </li>
                         
                        <li>
                             <a href="#url">الشاشة الصغيرة</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>راسلنا</strong></a>
                <div class="col1">
                     
                    <ul class="colSingle">
                         
                        <li>
                             <a href="#url">إيميل ID</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل نمبر.</a>
                        </li>
                         
                        <li>
                             <a href="#url">نموذج الاتصال</a>
                        </li>
                         
                        <li>
                             <a href="#url">بريدي الإلكتروني</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>خصوصية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>نصائح</strong></a>
                <div class="col2 right">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">عروضات جوجل</a>
                        </li>
                         
                        <li>
                             <a href="#url">روابط دائمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">Alexa Rank</a>
                        </li>
                         
                        <li>
                             <a href="#url">ترتيب الصفحات بيج رنك</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a> <a href="http://homeblog7.blogspot.com" title="صممت من قبل هوم بلوجر" style="font-size:8px;">هوم بلوجر</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
        </ul>
         
    </div><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 
<!--   end info   -->

سيد الكينج كتب:الكود الاول وهو انك مثلا تيجي تدوس علي زر من ازرار الرئيسة التسجيل الخ

او صورة فتنور او تعمل مؤثرات ؟


الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها


علما ان انا احتاج هذه الاكواد لصفحات الهتمل وليس المنتدي

الكود:

<div id='cssmenu'>
<ul>
  <li><a href='#'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='add.php' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li>
  <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
        <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li>
        <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li>
      </ul>
  </li>
  <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li>
  <li class='last'><a href='index.php'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } 
#cssmenu{border-color:#1b313d;} 
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6696bd;} 
#cssmenu > ul > li > a:hover{background:#436f93;} 

</style> 

وهبة الساحر كتب:

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها

ضع كل سؤال فى موضوع منفصل

الكود:



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><style type="text/css">
.menuhomeblog7 {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(173,255,47));
background-image: -webkit-linear-gradient(-90deg, rgba(2173,255,47), rgba(173,255,47));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(173,255,47), rgba(173,255,47));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuhomeblog7 ul.nav li {display:inline-block; display:inline;}
.menuhomeblog7 ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuhomeblog7 ul.nav li {float:right; display:block; padding:0 4px;}
.menuhomeblog7 ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuhomeblog7 ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}
.menuhomeblog7 ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuhomeblog7 ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div {position:absolute; top:40px; right:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuhomeblog7 ul.nav div.right {right:auto; left:4px;}
.menuhomeblog7 ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div ul.colright {margin-right:10px;}
.menuhomeblog7 ul.nav div ul.colleft {margin-left:10px;}
.menuhomeblog7 ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}
.menuhomeblog7 ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuhomeblog7 ul.nav div ul li:last-child {border:0;}
.menuhomeblog7 ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 15px 4px 0; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}
.menuhomeblog7 ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuhomeblog7 ul.nav div.col1 {width:160px;}
.menuhomeblog7 ul.nav div.col2 {width:310px;}
.menuhomeblog7 ul.nav div.col3 {width:460px;}
.menuhomeblog7 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
     
    <div class="menuhomeblog7">
         
        <ul class="nav">
             
            <li>
                 <a class="top-a" href="#url"><strong>الرئيسية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>بلوجر</strong></a>
                <div class="col3">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">إضافات بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">أعمالي</a>
                        </li>
                         
                        <li>
                             <a href="#url">دروس بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">سيو</a>
                        </li>
                         
                        <li>
                             <a href="#url">قوالب بلوجر</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="col">
                         
                        <li>
                             <a href="#url">تدوينات مهمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">آخر المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">مشاركات شائعة</a>
                        </li>
                         
                        <li>
                             <a href="#url">شات المدونة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">قائمة التصفح</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الجانبية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الأفقية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة العمودية</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>موقع SEO </strong></a>
                <div class="col2">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">هيدر</a>
                        </li>
                         
                        <li>
                             <a href="#url">فوتر</a>
                        </li>
                         
                        <li>
                             <a href="#url">المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">موبايل </a>
                        </li>
                         
                        <li>
                             <a href="#url">عروض الموبايلات</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل seo</a>
                        </li>
                         
                        <li>
                             <a href="#url">الشاشة الصغيرة</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>راسلنا</strong></a>
                <div class="col1">
                     
                    <ul class="colSingle">
                         
                        <li>
                             <a href="#url">إيميل ID</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل نمبر.</a>
                        </li>
                         
                        <li>
                             <a href="#url">نموذج الاتصال</a>
                        </li>
                         
                        <li>
                             <a href="#url">بريدي الإلكتروني</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>خصوصية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>نصائح</strong></a>
                <div class="col2 right">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">عروضات جوجل</a>
                        </li>
                         
                        <li>
                             <a href="#url">روابط دائمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">Alexa Rank</a>
                        </li>
                         
                        <li>
                             <a href="#url">ترتيب الصفحات بيج رنك</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a> <a href="http://homeblog7.blogspot.com" title="صممت من قبل هوم بلوجر" style="font-size:8px;">هوم بلوجر</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
        </ul>
         
    </div><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 
<!--   end info   -->

البرق200 كتب:

سيد الكينج كتب:الكود الاول وهو انك مثلا تيجي تدوس علي زر من ازرار الرئيسة التسجيل الخ

او صورة فتنور او تعمل مؤثرات ؟


الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها


علما ان انا احتاج هذه الاكواد لصفحات الهتمل وليس المنتدي

السلام عليكم
بعد اذن المشرف

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها
تفضل
_
_
_

  <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li> 
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a> 
      <ul> 
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li> 
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li> 
      </ul> 
   </li> 
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li> 
   <li class='last'><a href='index.php'><span>الموقع</span></a></li> 
</ul> 
</div> 
<style type="text/css"> 
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>

سيد الكينج كتب:

البرق200 كتب:

سيد الكينج كتب:الكود الاول وهو انك مثلا تيجي تدوس علي زر من ازرار الرئيسة التسجيل الخ

او صورة فتنور او تعمل مؤثرات ؟


الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها


علما ان انا احتاج هذه الاكواد لصفحات الهتمل وليس المنتدي

السلام عليكم
بعد اذن المشرف

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها
تفضل
_
_
_

  <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li> 
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a> 
      <ul> 
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li> 
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li> 
      </ul> 
   </li> 
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li> 
   <li class='last'><a href='index.php'><span>الموقع</span></a></li> 
</ul> 
</div> 
<style type="text/css"> 
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>

الكود مش شغال اخي الحبيب

اعتذر منك فانا لم انسخ لك الكود كامل
الكود احترافي + مجرب  
تفضل وجرب

الكود:

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='add.php' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li>
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li>
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li>
      </ul>
   </li>
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li>
   <li class='last'><a href='index.php'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>  

البرق200 كتب:

سيد الكينج كتب:

البرق200 كتب:

سيد الكينج كتب:الكود الاول وهو انك مثلا تيجي تدوس علي زر من ازرار الرئيسة التسجيل الخ

او صورة فتنور او تعمل مؤثرات ؟


الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها


علما ان انا احتاج هذه الاكواد لصفحات الهتمل وليس المنتدي

السلام عليكم
بعد اذن المشرف

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها
تفضل
_
_
_

  <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li> 
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a> 
      <ul> 
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li> 
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li> 
      </ul> 
   </li> 
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li> 
   <li class='last'><a href='index.php'><span>الموقع</span></a></li> 
</ul> 
</div> 
<style type="text/css"> 
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>

الكود مش شغال اخي الحبيب

اعتذر منك فانا لم انسخ لك الكود كامل
الكود احترافي + مجرب  
تفضل وجرب

الكود:

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='add.php' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li>
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li>
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li>
      </ul>
   </li>
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li>
   <li class='last'><a href='index.php'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>  

سيد الكنك كتب:الكود احترافي فعلا .. لكن احتاج الي تكبير المسافه بين الكلامات والفواصل هل ممكنا ؟

الكود:

<div id='cssmenu'>
<ul>
  <li><a href='#'><span>أضف عنوانا</span></a></li>
 <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='add.php' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li>
  <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
        <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li>
        <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li>
      </ul>
  </li>
  <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li>
  <li class='last'><a href='index.php'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } 
#cssmenu{border-color:#1b313d;} 
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6696bd;} 
#cssmenu > ul > li > a:hover{background:#436f93;} 

</style>

البرق200 كتب:

سيد الكنك كتب:الكود احترافي فعلا .. لكن احتاج الي تكبير المسافه بين الكلامات والفواصل هل ممكنا ؟

جرب الان بعد التعديل

الكود:

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>أضف عنوانا</span></a></li>
 <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='add.php' target='_blank'><span>أضف عنوانا</span></a></li>
   <li><a href='contact.php' target='_blank'><span>اتصل بنا</span></a></li>
   <li class='has-sub'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
         <li><a href='1.php' target='_blank'><span>القسم 1</span></a></li>
         <li class='last'><a href='2.php' target='_blank'><span>القسم 2</span></a></li>
      </ul>
   </li>
   <li><a href='/vb/' target='_blank'><span>المنتدى</span></a></li>
   <li class='last'><a href='index.php'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }  
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}  
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}  
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }  
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}  
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }  
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}  
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }  
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}  
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}  
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}  
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }  
#cssmenu ul li > ul{width:200px;}  
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}  
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }  

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); }  
#cssmenu{border-color:#1b313d;}  
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#6696bd;}  
#cssmenu > ul > li > a:hover{background:#436f93;}  

</style>

نفس الفكرة

https://www.google.com.ly/?gws_rd=ssl#safe=strict&q=%D9%83%D9%88%D8%AF+%D9%82%D8%A7%D8%A6%D9%85%D8%A9+%D8%A7%D8%B2%D8%B1%D8%A7%D8%B1+css

البرق200 كتب:

نفس الفكرة

انا بعدت لك الفراغ على يمين
بنسبة لتكبير المسافة بين الزر والزر الاخر لآ بمكن التعديل عليه او يعطب الكود
يمكنك البحث فى جوجل لآن الكود الذى تريده غير متوفر

https://www.google.com.ly/?gws_rd=ssl#safe=strict&q=%D9%83%D9%88%D8%AF+%D9%82%D8%A7%D8%A6%D9%85%D8%A9+%D8%A7%D8%B2%D8%B1%D8%A7%D8%B1+css

تذكر اخى الكريم
إذا حصلت على الجواب المقنع لسؤالك, لا تنس بتعديل موضوعك و وضع ايقونة لتسهل عمل فريق المساعدة و تحافظ على النظام في منتدى الدعم.

سيد الكنج كتب:طيب ممكن تفيديني في مؤثرات الصور ؟

سيد الكينج كتب:

وهبة الساحر كتب:

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها

ضع كل سؤال فى موضوع منفصل

الكود:



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><style type="text/css">
.menuhomeblog7 {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(173,255,47));
background-image: -webkit-linear-gradient(-90deg, rgba(2173,255,47), rgba(173,255,47));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(173,255,47), rgba(173,255,47));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuhomeblog7 ul.nav li {display:inline-block; display:inline;}
.menuhomeblog7 ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuhomeblog7 ul.nav li {float:right; display:block; padding:0 4px;}
.menuhomeblog7 ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuhomeblog7 ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}
.menuhomeblog7 ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuhomeblog7 ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div {position:absolute; top:40px; right:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuhomeblog7 ul.nav div.right {right:auto; left:4px;}
.menuhomeblog7 ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div ul.colright {margin-right:10px;}
.menuhomeblog7 ul.nav div ul.colleft {margin-left:10px;}
.menuhomeblog7 ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}
.menuhomeblog7 ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuhomeblog7 ul.nav div ul li:last-child {border:0;}
.menuhomeblog7 ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 15px 4px 0; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}
.menuhomeblog7 ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuhomeblog7 ul.nav div.col1 {width:160px;}
.menuhomeblog7 ul.nav div.col2 {width:310px;}
.menuhomeblog7 ul.nav div.col3 {width:460px;}
.menuhomeblog7 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
     
    <div class="menuhomeblog7">
         
        <ul class="nav">
             
            <li>
                 <a class="top-a" href="#url"><strong>الرئيسية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>بلوجر</strong></a>
                <div class="col3">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">إضافات بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">أعمالي</a>
                        </li>
                         
                        <li>
                             <a href="#url">دروس بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">سيو</a>
                        </li>
                         
                        <li>
                             <a href="#url">قوالب بلوجر</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="col">
                         
                        <li>
                             <a href="#url">تدوينات مهمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">آخر المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">مشاركات شائعة</a>
                        </li>
                         
                        <li>
                             <a href="#url">شات المدونة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">قائمة التصفح</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الجانبية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الأفقية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة العمودية</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>موقع SEO </strong></a>
                <div class="col2">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">هيدر</a>
                        </li>
                         
                        <li>
                             <a href="#url">فوتر</a>
                        </li>
                         
                        <li>
                             <a href="#url">المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">موبايل </a>
                        </li>
                         
                        <li>
                             <a href="#url">عروض الموبايلات</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل seo</a>
                        </li>
                         
                        <li>
                             <a href="#url">الشاشة الصغيرة</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>راسلنا</strong></a>
                <div class="col1">
                     
                    <ul class="colSingle">
                         
                        <li>
                             <a href="#url">إيميل ID</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل نمبر.</a>
                        </li>
                         
                        <li>
                             <a href="#url">نموذج الاتصال</a>
                        </li>
                         
                        <li>
                             <a href="#url">بريدي الإلكتروني</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>خصوصية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>نصائح</strong></a>
                <div class="col2 right">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">عروضات جوجل</a>
                        </li>
                         
                        <li>
                             <a href="#url">روابط دائمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">Alexa Rank</a>
                        </li>
                         
                        <li>
                             <a href="#url">ترتيب الصفحات بيج رنك</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a> <a href="http://homeblog7.blogspot.com" title="صممت من قبل هوم بلوجر" style="font-size:8px;">هوم بلوجر</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
        </ul>
         
    </div><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 
<!--   end info   -->

كود جميل لكن الكلمات جنب بعض هل من الممكن عمل الوان للكلام واضافة مسافه بينهم ؟

البرق200 كتب:

سيد الكنج كتب:طيب ممكن تفيديني في مؤثرات الصور ؟

اكرر واقول لك
اذا تحصلت على رد مقنع اكتب تم الحل
+
ضع موضوع منفصل جديد لآنك خرجت عن موضوعك الاساسي

وهبة الساحر كتب:

سيد الكينج كتب:

وهبة الساحر كتب:

الكود الثاني فيه ازرار تدوس عليها تطلعلك قائمة ازرار اخري للضغط عليها

ضع كل سؤال فى موضوع منفصل

الكود:



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><style type="text/css">
.menuhomeblog7 {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(173,255,47));
background-image: -webkit-linear-gradient(-90deg, rgba(2173,255,47), rgba(173,255,47));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(173,255,47), rgba(173,255,47));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuhomeblog7 ul.nav li {display:inline-block; display:inline;}
.menuhomeblog7 ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuhomeblog7 ul.nav li {float:right; display:block; padding:0 4px;}
.menuhomeblog7 ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuhomeblog7 ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}
.menuhomeblog7 ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuhomeblog7 ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div {position:absolute; top:40px; right:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuhomeblog7 ul.nav div.right {right:auto; left:4px;}
.menuhomeblog7 ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div ul.colright {margin-right:10px;}
.menuhomeblog7 ul.nav div ul.colleft {margin-left:10px;}
.menuhomeblog7 ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}
.menuhomeblog7 ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuhomeblog7 ul.nav div ul li:last-child {border:0;}
.menuhomeblog7 ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 15px 4px 0; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}
.menuhomeblog7 ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuhomeblog7 ul.nav div.col1 {width:160px;}
.menuhomeblog7 ul.nav div.col2 {width:310px;}
.menuhomeblog7 ul.nav div.col3 {width:460px;}
.menuhomeblog7 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
     
    <div class="menuhomeblog7">
         
        <ul class="nav">
             
            <li>
                 <a class="top-a" href="#url"><strong>الرئيسية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>بلوجر</strong></a>
                <div class="col3">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">إضافات بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">أعمالي</a>
                        </li>
                         
                        <li>
                             <a href="#url">دروس بلوجر</a>
                        </li>
                         
                        <li>
                             <a href="#url">سيو</a>
                        </li>
                         
                        <li>
                             <a href="#url">قوالب بلوجر</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="col">
                         
                        <li>
                             <a href="#url">تدوينات مهمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">آخر المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">مشاركات شائعة</a>
                        </li>
                         
                        <li>
                             <a href="#url">شات المدونة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">قائمة التصفح</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الجانبية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة الأفقية</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة العمودية</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>موقع SEO </strong></a>
                <div class="col2">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">هيدر</a>
                        </li>
                         
                        <li>
                             <a href="#url">فوتر</a>
                        </li>
                         
                        <li>
                             <a href="#url">المشاركات</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">القائمة</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">موبايل </a>
                        </li>
                         
                        <li>
                             <a href="#url">عروض الموبايلات</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل seo</a>
                        </li>
                         
                        <li>
                             <a href="#url">الشاشة الصغيرة</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>راسلنا</strong></a>
                <div class="col1">
                     
                    <ul class="colSingle">
                         
                        <li>
                             <a href="#url">إيميل ID</a>
                        </li>
                         
                        <li>
                             <a href="#url">موبايل نمبر.</a>
                        </li>
                         
                        <li>
                             <a href="#url">نموذج الاتصال</a>
                        </li>
                         
                        <li>
                             <a href="#url">بريدي الإلكتروني</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>خصوصية</strong></a>
            </li>
             
            <li>
                 <a class="top-a" href="#url"><strong>نصائح</strong></a>
                <div class="col2 right">
                     
                    <ul class="colright">
                         
                        <li>
                             <a href="#url">عروضات جوجل</a>
                        </li>
                         
                        <li>
                             <a href="#url">روابط دائمة</a>
                        </li>
                         
                        <li>
                             <a href="#url">Alexa Rank</a>
                        </li>
                         
                        <li>
                             <a href="#url">ترتيب الصفحات بيج رنك</a>
                        </li>
                         
                    </ul>
                     
                    <ul class="colleft">
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a>
                        </li>
                         
                        <li>
                             <a href="#url">تعديل</a> <a href="http://homeblog7.blogspot.com" title="صممت من قبل هوم بلوجر" style="font-size:8px;">هوم بلوجر</a>
                        </li>
                         
                    </ul>
                     
                </div>
                 
            </li>
             
        </ul>
         
    </div><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 
<!--   end info   -->

كود جميل لكن الكلمات جنب بعض هل من الممكن عمل الوان للكلام واضافة مسافه بينهم ؟

الكود ليس به هذا المشكل لانى استعمله فى منتدايا وانا وضعته لك لتلبيت طلبك البسيط الكود يعمل بتنقية الجاكورى وتقنية 3d داخل كود هتمل ممكن من فضلك ضع رابط المنتدى للمعاينه الكود الذى قدمته لك , اذا به مشكل لديك سأقوم بتعديل عليه بدون جدوى