كيف جعل المنتديات الفرعية على الإستايل الافتراضي تنبثق بقائمة بمنسدلة عند مرور الماوس

{if {$forum['is_sub']} and {$_CONF['info_row']['no_sub']}}
<div class="home-sub-forums-lain">
{$lang['forum_sub']}:
</div>
<div class="div-sub-forums-columns">
<ol class="home-sub-forums-columns">
{$forum['sub']}
</ol>
</div>
{/if}

<!-- start_forum_sub -->
{if {$forum['is_sub']}}
{if {$_CONF['info_row']['no_sub']}}
<style>
.forum_sub{
display:block;
}
.forum_sub li a{
display:block;
background:none repeat scroll 0 0 #4A4E51;
border-radius: 3px;
color:#F8F8F8;
margin: 2px;
padding: 5px;
text-shadow: 0 1px 0 #2e3539;
font-size: 11px;
font-weight: bold;
}
.forum_sub li.menu_dropdown a:hover{
color:#fff;
text-shadow: 0 1px 0 #2e3539;
}

ul.dropdown ul{
position:absolute;
display:none;
background-color:#3A4249;
color:#FFFFFF;
border-radius: 10px;
font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
font-size: 11px;
padding: 7px;
z-index:99999;
min-width:8em;
margin-top: 7px;
top: 7px;
}

ul.dropdown li:hover>ul{
display:block;
}
ul.dropdown li{
position:relative;
display:block;
font-size:0.9em;
border-radius:4px;
padding-right:5px;
}
ul.dropdown li:hover{
}
ul.dropdown{
font-size:0.9em;
position:relative;
display:inline-block;
padding:0
}

* html ul.dropdown li a{
display:inline-block;
}
ul.dropdown>li{
margin:5px;
}
ul.dropdown a:active,ul.dropdown a:focus{
outline-style:none
}
ul.dropdown a{
font-weight: bold;
padding:2px
}
ul.dropdown ul li{
float:none;
margin:8px 0 0;
color:#FFF
}
ul.dropdown ul a{
text-align:center;
padding:1px;
background-image:none;
border-width:0;
border-radius:4px;
text-decoration:none;
}

ul.dropdown li:hover>a,ul.dropdown li a.pressed{
text-decoration:none
}
ul.dropdown img{
border:0;
vertical-align:middle;
margin-right:10px
}
ul.dropdown span{
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0
}
ul.dropdown ul li:hover>a,ul.dropdown ul li a.pressed{
text-decoration:none;
text-shadow:0 0 0 #FFF
}
ul.dropdown li.topfirst>a{
border-width:0;
border-radius:4px 0 0 4px
}
ul.dropdown li.toplast>a{
border-radius:0 4px 4px 0
}
.SubIcon {
    background:#fef9d2;
    color:#0f6ebf;
    font-size: 12px;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    padding: 0 4px;
    margin-top: 5px;
    text-align: center;
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
}
.forum_sub li.menu_dropdown a:hover{
color:#fff;
text-shadow: 0 1px 0 #2e3539;
}
</style>
<ul class="dropdown topmenu">
<li class="topmenu" title="{$lang['forum_sub']}">
<span class="SubIco">
<i class="SubIc fa fa-folder-open-o fa-2x"></i> {$lang['forum_sub']}
</span>
<ul class="forum_sub" style="width: 200px;">
<li class="menu_dropdown">
<?php

$forum['sub'] = @preg_replace('#<a (.*?) href="(.*?)">(.*?)</a>#i', "{url=$2}$3{/url}", $forum['sub']);
$forum['sub'] = $PowerBB->functions->CleanText($forum['sub']);
$forum['sub'] = $PowerBB->Powerparse->replace($forum['sub']);
$forum['sub'] = @preg_replace('#{url=(.*?)}(.*?){/url}#i', '<a href="$1">$2</a>', $forum['sub']);

echo $forum['sub'];
?>
</li>
</ul>
</li>
</ul>
{/if}
{/if}
<!-- end_forum_sub  -->