القلم الذهبي - تغير شكل الاقسام الفرعية في قائمة منسدلة Css3

اليوم اقدم لكم شرح تغير شكل الاقسام الفرعية وعرضها في قائمة منسدله بتقنية Css3
أو ما يعرف بـ dropdown

:: صورة توضيحية ::

http://www.hanaenet.com/vb/imgcache/2/26568alsh3er.gif

التعديل على قالبين في الاستايل
الاول forumhome_forumbit_level2_post
الثاني forumhome_subforumbit_post

:: الشرح ::

نبحث في القالب الاول forumhome_forumbit_level2_post عن :

كود:

<if condition="$show['subforums']">

كما في الصورة :

http://www.hanaenet.com/vb/imgcache/2/26569alsh3er.gif

نستبدله بـ :

كود PHP:

   <ul class="dropdown">
    <li>$vbphrase[subforums]</li>
    <ul class="dropdown-content">
        <li>$forum[subforums]</li>
    </ul>
</ul>

ثم نضغط على حفظ وإعادة التحميل
انتهينا من القالب الاول http://www.hanaenet.com/vb/imgcache/2/26570alsh3er.gif

نبحث في قالب الثاني forumhome_subforumbit_post عن

كود PHP:

   <img class="inlineimg" src="$stylevar[imgdir_statusicon]/subforum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" />

ونقوم بحذفه ، كما في الصورة :

http://www.hanaenet.com/vb/imgcache/2/26571alsh3er.gif

ثم نضغط على حفظ وإعادة التحميل
انتهينا من القالب الثاني http://www.hanaenet.com/vb/imgcache/2/26572alsh3er.gif

تبقى لنا اضافة خصائص Css
نحدد الاستايل ونختار css رئيسي

http://www.hanaenet.com/vb/imgcache/2/26573alsh3er.gif

في نهاية الحقل الثاني تعاريف CSS الإضافية/Additional CSS Definitions
نضيف الكود التالي :

كود PHP:

             

.dropdown {
    position: relative;
    display: inline-block;
    background-color: #113366;
    padding: 5px;
    border-radius: 7px;
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;
}
ul.dropdown li {
    list-style: none;
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;
    color: #FFF;
}


.dropdown-content {
    display: none;
    position: absolute;
    border-radius: 7px;
    -min-width: 160px;
    margin: 6px;
    z-index: 1;
    background-color: #FFF;
    padding: 10px 10px;
    border: 2px solid #CCC;
}


.dropdown-content a {
    position: relative;
    display: block;
    background-color: #113366;
    padding: 5px;
    color: #FFF;
    border-radius: 7px;
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;
    text-decoration: none;
    min-width: 160px;
    border: 2px solid #CCC;
}

.dropdown-content a:hover {
    list-style: none;
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;
    color: #113366;
    background-color: #FFF;
    border: 2px solid #CCC;
}


.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown ul li:before {
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    border-left: 7px solid transparent;
    border-bottom-color: #FFF;
    content: '';
    display: inline-block;
    position: absolute;
    right: 16px;
    top: -7px;
}

انتهى الشرح http://www.hanaenet.com/vb/imgcache/2/26574alsh3er.gif