Widget retrátil

• Descrição:

Olá galera. Eu tentei de algumas maneiras com um code que eu tinha e saiu bem desconfigurado, mas eu queria saber se alguém poderia me ajudar numa questão. Tipo... Eu estava querendo que parte dos widgets do meu fórum fossem retráteis. No meu fórum há widget cheios de botões, pois há várias área e tópicos que o jogadores estão sempre indo e precisam ver. Por isso, pra não ficar aquele monte de botões um abaixo do outro, pensei em fazer com que eles ficassem retraídos e, assim que alguém clicasse com o cursor encima de algum botão, eles se expandissem. 


Meu fórum é esse: xmenmarvelrpg.forumeiros.com


e os botões que eu pensei em ficar retráteis são esses:




Se alguém puder ajudar, eu fico muito agradecido. Mas caso contrário, agradeço mesmo assim pela atenção. Obrigado.

• Informações:

https://ajuda.forumeiros.com/t55030-

Código:

<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: #660000; opacity:1.0px; font-size: 10px; letter-spacing: 1px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style>
<div class="sidebar">
   
   <table valign="relative">
      
      <tbody>
         <tr>
            
            <td>
               
               <div style="width: 230px; padding:10px; height: 100%; background-color: #000; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
                   <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #ffffff;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong> </strong>
                  </div><br /> <img src="http://i39.servimg.com/u/f39/17/68/38/04/menu_p15.jpg" border="0" alt="" /> Bem vindo ao <strong><span style="color: #A4D3EE;">X-MEN MARVEL RPG</span></strong>. "Nosso RPG é baseado no Universo XMarvel. O Universo XMarvel é uma criação exclusiva desse RPG. É uma ruptura dimensional do Universo 616, universo principal dos Quadrinhos da Marvel, baseado no mundo real, utilizado como pano de fundo em comum para histórias de diferentes séries em quadrinhos, e de cenário para encontros entre os personagens. Ou seja, a maioria das leis que valem para o 616 valem aqui, mas nosso Universo caminha independente do 616. Além disso, alguns personagens mortos no Universo 616, voltaram à vida no Universo XMarvel, sem contudo que alguém tenha conhecimento sobre suas mortes, nem sobre o que aconteceu no período que estiveram mortos no 616. Em outros termos é como se nunca tivessem morrido. É nesse contexto que nos encontramos. <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/nmenu212.jpg" /> <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #FFFFFF;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong></strong>
                  </div><br />
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f40-regras-e-tutoriais" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Regras</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t444-trama" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Trama</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t489-lista-de-cannons" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Cannons</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f41-registros-avatares-poderes" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Registros</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f11-protocolo-de-poderes" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Poderes</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/f39-fichas-dos-personagens" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Fichas</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t333-lista-de-desvantagens" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Desvantagens</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t308-pericias" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Perícias</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t608-nos-queremos-voce-torne-se-um-narrador-estagiario#1199" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Estágio</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t484-area-de-transacoes#1594" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Área de Transações</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t713-area-de-uniformes-de-combate#1595" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Uniformes de Combate</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                   <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/arsena15.jpg" /> <br />
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t510-arsenal-da-shield#978" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da S.H.I.E.L.D.</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t420-arsenal-de-armas?highlight=arsenal" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Thunderbolts</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t548-arsenal-dos-vingadores?highlight=arsenal" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Vingadores</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t481-arsenal-de-equipamentos#916" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da HYDRA</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t735-arsenal-da-x-factor#1706" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Factor</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t579-arsenal-da-x-force#1092" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Force</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t543-arsenal-de-combate-asgardiano#" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal Asgardiano</span></span></a>
                  </div>
                  <p>
                     
                  </p>
                  
                  <div class="wid">
                      <a href="http://xmenmarvelrpg.forumeiros.com/t823-arsenal-do-clube-do-inferno#2144" class="postlink"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal do Clube do Inferno</span></span></a>
                  </div>
                  
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>

Código:


<style>.wid:hover {background-color: white; } .wid { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; background-color: #660000; opacity:1.5px; font-size: 11px; letter-spacing: 0px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; top: 1px; width: 220px; }</style> <script>
jQuery(function () {
    jQuery('#menu1, #menu2').hide();
    jQuery('#botaomenu1').click(function () {
        jQuery('#menu1').toggle('slow');
    });
    jQuery('#botaomenu2').click(function () {
        jQuery('#menu2').toggle('slow');
    });
});
</script>
<div class="sidebar">
   
   <table valign="relative">
      
      <tbody>
         <tr>
            
            <td>
               
               <div style="width: 230px; padding:10px; height: 100%; background-color: #000; position: relative; top:0px; bottom:0px; margin-top:0px; margin-keft:0px; font-family: trebuchet ms; text-align: justify; font-size: 9px; text-transform: uppercase; color: 000; letter-spacing:0px; ">
                   <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #ffffff;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong> </strong>
                  </div><br /> <img alt="" border="0" src="http://i39.servimg.com/u/f39/17/68/38/04/menu_p15.jpg" /> Bem vindo ao <strong><span style="color: #A4D3EE;">X-MEN MARVEL RPG</span></strong>. "Nosso RPG é baseado no Universo XMarvel. O Universo XMarvel é uma criação exclusiva desse RPG. É uma ruptura dimensional do Universo 616, universo principal dos Quadrinhos da Marvel, baseado no mundo real, utilizado como pano de fundo em comum para histórias de diferentes séries em quadrinhos, e de cenário para encontros entre os personagens. Ou seja, a maioria das leis que valem para o 616 valem aqui, mas nosso Universo caminha independente do 616. Além disso, alguns personagens mortos no Universo 616, voltaram à vida no Universo XMarvel, sem contudo que alguém tenha conhecimento sobre suas mortes, nem sobre o que aconteceu no período que estiveram mortos no 616. Em outros termos é como se nunca tivessem morrido. É nesse contexto que nos encontramos. <img src="http://i39.servimg.com/u/f39/17/68/38/04/nmenu212.jpg" border="0" alt="" /> <br /> <strong></strong>
                  <div style="background-color: #660000; font-family: Text me one, cursive; font-size:12px; width:230px; color: #FFFFFF;  letter-spacing:1px; padding:1px; text-align: center; ">
                      <strong></strong>
                  </div><br />
                  <div id="botaomenu1" class="wid">
                      <a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Menu</span></span></a>
                  </div>
                  
                  <div id="menu1">
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f40-regras-e-tutoriais"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Regras</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t444-trama"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Trama</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t489-lista-de-cannons"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Cannons</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f41-registros-avatares-poderes"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Registros</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f11-protocolo-de-poderes"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Poderes</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/f39-fichas-dos-personagens"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Fichas</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t333-lista-de-desvantagens"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Desvantagens</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t308-pericias"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Perícias</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t608-nos-queremos-voce-torne-se-um-narrador-estagiario#1199"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Estágio</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t484-area-de-transacoes#1594"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Área de Transações</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t713-area-de-uniformes-de-combate#1595"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Uniformes de Combate</span></span></a>
                     </div>
                     
                  </div>
                  
                  <p>
                     
                  </p>
                   <img src="http://i39.servimg.com/u/f39/17/68/38/04/arsena15.jpg" border="0" alt="" /> <br />
                  <p>
                     
                  </p>
                  
                  <div id="botaomenu2" class="wid">
                      <a class="postlink" href="#_"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Menu Arsenais</span></span></a>
                  </div>
                  
                  <p>
                     
                  </p>
                  
                  <div id="menu2">
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t510-arsenal-da-shield#978"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da S.H.I.E.L.D.</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t420-arsenal-de-armas?highlight=arsenal"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Thunderbolts</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t548-arsenal-dos-vingadores?highlight=arsenal"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal dos Vingadores</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t481-arsenal-de-equipamentos#916"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da HYDRA</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t735-arsenal-da-x-factor#1706"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Factor</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t579-arsenal-da-x-force#1092"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal da X-Force</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t543-arsenal-de-combate-asgardiano#"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal Asgardiano</span></span></a>
                     </div>
                     
                     <p>
                        
                     </p>
                     
                     <div class="wid">
                         <a class="postlink" href="http://xmenmarvelrpg.forumeiros.com/t823-arsenal-do-clube-do-inferno#2144"><span style="font-family: 'Bankgothic djmm';"><span style="color: rgb(139, 134, 130);">Arsenal do Clube do Inferno</span></span></a>
                     </div>
                     
                  </div>
                  
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>