Duvida ajudem ae

Qual é minha questão:
Gostaria de saber como fazer esse menu . Quando passa o mouse em cima do topico.








quero saber como faz isso



Endereço do meu fórum:
Não é necessário.

Versão do fórum:
PHPBB3

Poderia dexar o link De Onde vil o Efeito

Painel de Controle Visualização Pagina Inicial Geral

Cole esse Code

Código:

<dl class="icon" style="background:url(http://icons.iconarchive.com/icons/uriy1966/steel-system/48/Folder-icon.png) no-repeat scroll 10px 50%;"><dd class="dterm"><div style="display: block; margin : 0 0px 0 65px;"><h3 class="hierarchy"><a href="/f2-administracao-do-servidor" class="forumtitle">Administração do servidor</a></h3><br><img src="http://icons.iconarchive.com/icons/iconleak/or/32/clipboard-icon.png" alt="http://icons.iconarchive.com/icons/iconleak/or/32/clipboard-icon.png" style="float:left"><style type="text/css">
<!--
.style1 {font-weight: bold}
.style2 {color: #00aaaa}
-->
</style>
<span class="desc"><font color="#333333">  → <strong><font style="italic">Local onde estará todas as informações da staff do servidor.</font></strong></font></span><div id="modo"><div class="tito"><table width="200" border="0" cellspacing="0" cellpadding="0">
  <tbody><tr>
    <th scope="col"> </th>
  </tr>
</tbody></table>
<table width="755" border="0" cellspacing="1" cellpadding="1">
  <tbody><tr>
    <th scope="col"><img src="http://icons.iconarchive.com/icons/mattahan/umicons/16/Arrow-right-icon.png" border="0" alt="">
    </th><td align="left"><strong><span class="style2"><a href="http://expressiv.forumeiros.com/f130-promocoes-rebaixamentos" class="postlink"><font color="#006699">Promoções &amp; Rebaixamentos</font></a></span>
       
    </strong>
    </td><th scope="col"><img src="http://icons.iconarchive.com/icons/mattahan/umicons/16/Arrow-right-icon.png" border="0" alt="">
    </th><td align="left"><span class="style4"><strong><a href="http://expressiv.forumeiros.com/f128-resignacoes" class="postlink style2"><font color="#006699">Resignação</font></a></strong>    </span>    </td></tr>
  <tr>
    <th scope="row"><img src="http://icons.iconarchive.com/icons/mattahan/umicons/16/Arrow-right-icon.png" border="0" alt="">
    </th><td align="left"><strong><span class="style4 style2"><a href="http://expressiv.forumeiros.com/f129-restabelecimentos" class="postlink "><font color="#006699">Restabelecimentos</font></a></span></strong><span class="style4">    </span>   
    </td><th scope="col"><img src="http://icons.iconarchive.com/icons/mattahan/umicons/16/Arrow-right-icon.png" border="0" alt="">
    </th><td align="left"><span class="style4 "><strong><a href="http://expressiv.forumeiros.com/f174-ausencia-para-administradores" class="postlink style2"><font color="#006699">Reportar Ausência</font></a><a href="http://forum.brasilexpressiveliving.com/f60-denuncias-contra-gangs-e-orgs-terroristas"></a></strong></span><span class="style4 style1"><a href="http://forum.brasilexpressiveliving.com/f60-denuncias-contra-gangs-e-orgs-terroristas">
   
    </a>    </span>  </td></tr>
  <tr>
    <th scope="row"><img src="http://icons.iconarchive.com/icons/mattahan/umicons/16/Arrow-right-icon.png" border="0" alt="arrow1">
    </th><td align="left"><strong><a href="http://expressiv.forumeiros.com/f35-retiradas" class="postlink "><font color="#006699">Retiradas</font></a></strong>
    </td><th scope="col">
    </th><td align="left">  </td></tr>
</tbody></table>
</div><div id="modo"><div class="tito"><table width="200" border="0" cellspacing="0" cellpadding="0">
  <tbody><tr></tr>
</tbody></table>
</div>
<br>
</div><div id="modo"><strong><font color="#333333">► Responsável:</font>  <font color="#108080">Winder_Dias</font></strong></div><br><strong></strong> </div></div></dd><dd class="topics">102 <dfn>Tópicos</dfn></dd><dd class="posts">537 <dfn>Mensagens</dfn></dd><dd class="lastpost"><span><a href="/t20863-restabelecimento-world_atari" title="Restabelecimento World_Atari">Restabelecimento...</a><br>Ontem à(s) 18:53<br><strong><a href="/u3641" class="gensmall"><span style="color:#108080" class="color-groups"><strong>Winder_Dias</strong></span></a></strong> <a href="/t20863-restabelecimento-world_atari#261433" class="last-post-icon"><img src="http://2img.net/i/fa/fdf3/link-l10.png" alt="Exibir a última mensagem" title="Exibir a última mensagem"></a></span></dd></dl>

esse vc Cola em

Painel de Controle Visualização Cores Folhas de Css

Código:

li.row:hover dd {
border-left-color: #787878;
}
dl.icon dd.dterm, dl.icon dt {
background-position: 5px 50%;
background-repeat: no-repeat;
}
ul.topiclist dd.dterm, ul.topiclist dt {
display: block;
float: left;
font-size: 1.1em;
padding-left: 5px;
padding-right: 5px;
width: 60%;
}
ul.forums dd {
border-color: #787878;
border-left-style: solid;
border-left-width: 1px;
}
ul.topiclist dd {
border-left: 1px solid #787878;
display: block;
float: left;
padding: 4px 0;
}
* {
margin: 0;
padding: 0;
}
user agent stylesheetdd {
display: block;
-webkit-margin-start: 40px;
}
Inherited from li.row
user agent stylesheetli {
text-align: -webkit-match-parent;
}
Inherited from ul.topiclist.forums
ul.topiclist {
color: #000;
list-style-type: none;
}

vo tenta vlw ;D

qual lugar posta o codigo do geral ?

Mensagem na Página Inicial. Conteúdo da mensagem

Obrigado