قالب overall_header لوضع قائمة علوية بتقنية css

السسلام عليكم

وهذا نفس الكود السابق بس بشكل اخر

معاينة للكود
https://2img.net/h/oi60.tinypic.com/317jgxj.png


ها هو الكود

الكود:


 <div class="menu">
    <ul>
    <li><span></span><a href="#">Home1</a></li>
    <li><span></span><a href="#">Home2</a></li>
    <li><span></span><a href="#">Home3</a></li>
    <li><span></span><a href="#">Home4</a></li>
    <li><span></span><a href="#">Home5</a></li>
    </ul>
</div>
        <style type="text/css">
     
.menu {
    text-align: center;
    border-bottom: 1px solid white;
}
.menu ul{
    background:#d62300;
    height:50px;
    width:97%;
    padding-top:20px;
    padding-left:3%;
}
.menu ul li{
    display:inline-block;
    position:relative;
    width:100px;
    height:30px;
    text-align:center;
}
.menu ul li a{
    position:absolute;
    z-index:100;
    left:0px;
    width:100%;
    height:25px;
    padding-top:5px;
    color:#eee;
    font-family:"TeXGyreReg",sans-serif;
    font-weight:normal;
    text-shadow:-1px -1px 0px rgba(0,0,0,0.2),1px 1px 0px rgba(255,255,255,0.2);
    font-size:1.1em;
    text-decoration:none;
    font-size:0.9em;
}
.menu ul li span{
    position:absolute;
    visibility:hidden;
    z-index:95;
    display:block;
    width:100px;
    height:30px;
    background:rgba(0,0,0,0.4);
    left:0px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
 
.menu ul li span{
    left:-1600px;
    -webkit-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -o-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -moz-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -ms-transition:left 0.2s ease,visibility 0s ease 0.2s;
    transition:left 0.2s ease,visibility 0s ease 0.2s;
}
 
.menu ul li:hover span{
    left:0px;
    visibility:visible;
    -webkit-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -o-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -moz-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -ms-transition:left 0.2s ease 0.3s,visibility 0s ease;
    transition:left 0.2s ease 0.3s,visibility 0s ease;
}
        </style>
       


يمكنك ان تزيد من العناصر المتواجدة بالقائمة عن طريق تكرار هذا الرمز فى الكود

الكود:


<li><span></span><a href="#">Home3</a></li>


طريقة الوضع:
لوحة الادارة/مظهر المنتدى/الصفحة الرئيسية/تشكيلات عامة

واذا ارت وضعه اسفل شريط الاشعارات يجب التعديل على التومبلايت
نتوجه الى ؟
هذا القالب:overall_header
ونبحث عن <!-- BEGIN switch_fb_login -->

وتضيف الكود اعلاه مباشرةً
والى اللقاء مع شرح جديد