Menu em abas

Qual é minha questão:
Neste tópico vi um modelo de menu muito interessante : https://ajuda.forumeiros.com/t66890-menu-em-abas-na-home-page

Só que o efeito dele é que apareça o conteúdo ao passar o mouse, gostaria de saber se tem como mudar este efeito ou então se existe um código diferente que possa ser implantado para que o conteúdo só apareça ao clicar com o mouse, modelo semelhante ao que tem no painel de administração dos foruns forumeiros na parte de widgets, assim:

Ao clicar em widgets personalizados muda a aba pra o conteudo correspondente


Grato desde já...

Endereço do meu fórum:
http://forum-teste.forumeiro.net

Versão do fórum:
PHPBB2

Olá!

Penso que isto resolva:

Código:

<style>
div.btn_home_left, div.btn_home_right {
    margin: 10px;
   border: 2px solid #d7d7d7;
   color: #00a5cd;
   text-decoration: none;
   float: left;
}

div.btn_home_left a, div.btn_home_left a:visited {
   color: #86b125;
   padding: 0px 10px;
   text-decoration: none;
}

div.btn_home_right a, div.btn_home_right a:visited {
   color: #86b125;
   padding: 0px 10px;
   text-decoration: none;
}

div.btn_home_left a:hover, div.btn_home_right a:hover {
   background: #eeeeee;
   color: #86b125;
   text-decoration: none;
}

div.btn_home_left span {
   background: url(http://2img.net/i/fa/admin/icones/type_subli.png) no-repeat 5px 0px;
   padding-left: 20px;
   padding-right: 10px;
   text-decoration: none;
}

div.btn_home_right span {
   background: url(http://2img.net/i/fa/admin/icones/type_subli.png) no-repeat right 0px;
   padding-left: 10px;
   padding-right: 20px;
   text-decoration: none;
}

div.btn_home_left span:hover{
   text-decoration: none;
   cursor: auto;
}

div.btn_home_right span:hover {
   text-decoration: none;
   cursor: auto;
}


#page-body .bottom-help {
   text-align: center;
   margin-top: 60px;
   clear: both;
   position: relative;
}

   #page-body .bottom-help .help-link {
      position: absolute;
      right: 10px;
      top: -50px;
   }

/* Classes used for forum auth
-------------------------------------*/
table td.checked-auth {
   background-color: #E7FFEA;
   border-top: 1px solid #BFFFC6;
   border-bottom: 1px solid #BFFFC6;
}

.more-less-auth {
   float: right;
   margin-top: -65px;
}
* html .more-less-auth {
   margin-top: -50px;
}

.fieldset_right .more-less-auth {
   float: left;
}

/*   Popup for preview
-------------------------------------*/
#preview_block .preview {
   background: url(http://2img.net/i/fa/admin/alpha.png);
}

#preview_block .preview img {
   margin: 30px;
   background: url(http://2img.net/i/fa/admin/wait_preview.gif) no-repeat 50% 50%;
}

/* Some general classes
-------------------------------------*/
.perso_domain_explain p {
   padding: 15px 40px 15px 40px;
}

.perso_domain_explain ul {
   padding: 15px 50px 15px 50px;
}

.btn_legend {
   vertical-align: middle;
   padding: 5px 0px 5px 15px;
}

.clear, .spacer {
   clear: both;
}

.v-align-tb {
   vertical-align: text-bottom;
}

.v-align-t {
   vertical-align: top;
}

.field_table {
   font-size: 1em;
   margin-bottom: 50px;
}

.div_btns {
   width: 100%;
   text-align: right;
   padding: 0px 0px 5px 0px;
}

.DIV_BTNS {
   width: 100%;
   text-align: right;
   padding: 0px 0px 5px 0px;
}

.block_portal_struct {
   border: outset 2px #458BAA;
   margin-top: 3px;
   margin-bottom: 3px;
}

.block_portal_struct tr {
   background: #F3F3F3;
}

.block_portal_struct th, .block_portal_struct th tr {
   background: url(none) #397D9C;
   padding: 0;
}

.block_portal_struct th td {
   color: #FFFFFF;
}

.block_portal_struct a:link, .block_portal_struct a:visited, .block_portal_struct .personnal_mod {
   color: #9DD381;
   text-decoration: underline;
   cursor: pointer;
}

.block_portal_struct a:hover, .block_portal_struct .existing_mod:hover, .block_portal_struct .personnal_mod:hover {
   color: #000000;
   text-decoration: underline;
   cursor: pointer;
}

.block_portal_struct_th {
   border: outset 2px #458BAA;
   margin-top: 3px;
   margin-bottom: 3px;
   background: url(none) #397D9C;
   padding: 0;
   color: #FFFFFF;
}

.block_portal_struct .existing_mod {
   text-decoration: underline;
   cursor: pointer;
   color: #C4C4C4;
}

.cursor_move {
   cursor: move;
}

/*
Sous-menu images, groupes, forums
*/
#tabs_menu {
   margin: 0px 1px 0px 0px;
}

#tabs_menu ul {
   list-style: none;
}

#tabs_menu li {
   display: inline;
   font-size: 1em;
   font-weight: bold;
}

#tabs_menu a {
   background:url(http://2img.net/i/fa/admin/icones/menu/sub_left1.png) no-repeat 0% 0px;
   padding-left:6px;
   text-decoration: none;
   position: relative;
   height: 32px;
   cursor: hand;
}
#tabs_menu a span {
   display: block;
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
   padding: 7px 12px 6px 6px;
   color: #706262;
   white-space: nowrap;
   vertical-align:bottom ;
   height: 20px;
}
* html #tabs_menu a span {
   display: block;
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
   padding: 7px 12px 6px 6px;
   color: #706262;
   white-space: nowrap;
   vertical-align:bottom ;
   width: 50px;
}

#tabs_menu a, #tabs_menu a span {
   float:left;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs_menu a span {
   float:none;
}
/* End hack */

#tabs_menu a:hover span {
   color: #00a5cd;
}

#tabs_menu #activetab a {
   background-position: 0 -33px;
}

#tabs_menu #activetab a span {
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% -33px;
   color:#7cba2c;
}

#tabs_menu #activetab a:hover span {
   color: #00a5cd;
}

#menu-body {
   padding: 0px;
   margin: -1px;
}
* html #menu-body {
   margin: -2px;
}

#menu-body:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

/* Hide from Mac IE, Windows IE uses this as it doesn't support the :after method above \*/
#menu-body {
   height: 1%;
}

.panel_menu {
   margin: 0px;
   background-color: #fff;
   border: 1px solid #CDCDCD;
   padding: 0 0 10px 0;
}

/* rajout si image trop grande en mode simple */
.panel_menu_simple {
   margin: 0px;
   background-color: #fff;
   border: 1px solid #CDCDCD;
   padding: 0 0 10px 0;
   overflow-x:auto;
   width:100%;
}

.left {
   text-align: left;
}

.right {
   text-align: right;
}
</style>

<div id="add_mod_dragdrop" style="width: 100%; padding: 2px 0px 0px; display: block;"><div id="menu-body"><div id="tabs_menu"><ul><li id="activetab"><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-left:1px solid #CDCDCD;"><span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodexist_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.lastChild.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';}">Widgets predefinidos</span></a></li><li><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-right:1px solid #CDCDCD;"><span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodperso_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.firstChild.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';}">Widgets pessoais</span></a></li></ul></div></div><div class="panel_menu"><table cellpadding="0" cellspacing="3px" border="0" id="addmodexist_draganddrop_table"><tbody><tr><td width="20%" style="padding:0;"><div id="addmod_-12" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Calendário</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-10" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Galeria</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-11" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Palavras chave</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-13" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Login</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-9" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os que mais criam tópicos</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-7" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos mais ativos</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-8" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos mais visitados</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-1" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Novidades</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-19" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos similares</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-2" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos recentes</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-16" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Flux RSS</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-3" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Procurar</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-14" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Social bookmarking</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-4" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Votação</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-5" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Estatísticas</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-15" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Top dos mais postadores</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-18" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os membros mais ativos do mês</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-17" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os membros mais ativos da semana</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-6" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Quem está conectado?</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr></tbody></table><table width="100%" cellpadding="0" cellspacing="3px" border="0" id="addmodperso_draganddrop_table" style="display:none;"><tbody><tr><td width="20%" style="padding:0;"><div id="addmod_-30" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Fórum</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-33" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Like/Tweet/+1</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-31" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Navegação</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"></div></td></tr></tbody></table></div></div>

Melhores cumprimentos.

Today escreveu:Olá!

Penso que isto resolva:

Código:

<style>
div.btn_home_left, div.btn_home_right {
    margin: 10px;
   border: 2px solid #d7d7d7;
   color: #00a5cd;
   text-decoration: none;
   float: left;
}

div.btn_home_left a, div.btn_home_left a:visited {
   color: #86b125;
   padding: 0px 10px;
   text-decoration: none;
}

div.btn_home_right a, div.btn_home_right a:visited {
   color: #86b125;
   padding: 0px 10px;
   text-decoration: none;
}

div.btn_home_left a:hover, div.btn_home_right a:hover {
   background: #eeeeee;
   color: #86b125;
   text-decoration: none;
}

div.btn_home_left span {
   background: url(http://2img.net/i/fa/admin/icones/type_subli.png) no-repeat 5px 0px;
   padding-left: 20px;
   padding-right: 10px;
   text-decoration: none;
}

div.btn_home_right span {
   background: url(http://2img.net/i/fa/admin/icones/type_subli.png) no-repeat right 0px;
   padding-left: 10px;
   padding-right: 20px;
   text-decoration: none;
}

div.btn_home_left span:hover{
   text-decoration: none;
   cursor: auto;
}

div.btn_home_right span:hover {
   text-decoration: none;
   cursor: auto;
}


#page-body .bottom-help {
   text-align: center;
   margin-top: 60px;
   clear: both;
   position: relative;
}

   #page-body .bottom-help .help-link {
      position: absolute;
      right: 10px;
      top: -50px;
   }

/* Classes used for forum auth
-------------------------------------*/
table td.checked-auth {
   background-color: #E7FFEA;
   border-top: 1px solid #BFFFC6;
   border-bottom: 1px solid #BFFFC6;
}

.more-less-auth {
   float: right;
   margin-top: -65px;
}
* html .more-less-auth {
   margin-top: -50px;
}

.fieldset_right .more-less-auth {
   float: left;
}

/*   Popup for preview
-------------------------------------*/
#preview_block .preview {
   background: url(http://2img.net/i/fa/admin/alpha.png);
}

#preview_block .preview img {
   margin: 30px;
   background: url(http://2img.net/i/fa/admin/wait_preview.gif) no-repeat 50% 50%;
}

/* Some general classes
-------------------------------------*/
.perso_domain_explain p {
   padding: 15px 40px 15px 40px;
}

.perso_domain_explain ul {
   padding: 15px 50px 15px 50px;
}

.btn_legend {
   vertical-align: middle;
   padding: 5px 0px 5px 15px;
}

.clear, .spacer {
   clear: both;
}

.v-align-tb {
   vertical-align: text-bottom;
}

.v-align-t {
   vertical-align: top;
}

.field_table {
   font-size: 1em;
   margin-bottom: 50px;
}

.div_btns {
   width: 100%;
   text-align: right;
   padding: 0px 0px 5px 0px;
}

.DIV_BTNS {
   width: 100%;
   text-align: right;
   padding: 0px 0px 5px 0px;
}

.block_portal_struct {
   border: outset 2px #458BAA;
   margin-top: 3px;
   margin-bottom: 3px;
}

.block_portal_struct tr {
   background: #F3F3F3;
}

.block_portal_struct th, .block_portal_struct th tr {
   background: url(none) #397D9C;
   padding: 0;
}

.block_portal_struct th td {
   color: #FFFFFF;
}

.block_portal_struct a:link, .block_portal_struct a:visited, .block_portal_struct .personnal_mod {
   color: #9DD381;
   text-decoration: underline;
   cursor: pointer;
}

.block_portal_struct a:hover, .block_portal_struct .existing_mod:hover, .block_portal_struct .personnal_mod:hover {
   color: #000000;
   text-decoration: underline;
   cursor: pointer;
}

.block_portal_struct_th {
   border: outset 2px #458BAA;
   margin-top: 3px;
   margin-bottom: 3px;
   background: url(none) #397D9C;
   padding: 0;
   color: #FFFFFF;
}

.block_portal_struct .existing_mod {
   text-decoration: underline;
   cursor: pointer;
   color: #C4C4C4;
}

.cursor_move {
   cursor: move;
}

/*
Sous-menu images, groupes, forums
*/
#tabs_menu {
   margin: 0px 1px 0px 0px;
}

#tabs_menu ul {
   list-style: none;
}

#tabs_menu li {
   display: inline;
   font-size: 1em;
   font-weight: bold;
}

#tabs_menu a {
   background:url(http://2img.net/i/fa/admin/icones/menu/sub_left1.png) no-repeat 0% 0px;
   padding-left:6px;
   text-decoration: none;
   position: relative;
   height: 32px;
   cursor: hand;
}
#tabs_menu a span {
   display: block;
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
   padding: 7px 12px 6px 6px;
   color: #706262;
   white-space: nowrap;
   vertical-align:bottom ;
   height: 20px;
}
* html #tabs_menu a span {
   display: block;
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
   padding: 7px 12px 6px 6px;
   color: #706262;
   white-space: nowrap;
   vertical-align:bottom ;
   width: 50px;
}

#tabs_menu a, #tabs_menu a span {
   float:left;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs_menu a span {
   float:none;
}
/* End hack */

#tabs_menu a:hover span {
   color: #00a5cd;
}

#tabs_menu #activetab a {
   background-position: 0 -33px;
}

#tabs_menu #activetab a span {
   background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% -33px;
   color:#7cba2c;
}

#tabs_menu #activetab a:hover span {
   color: #00a5cd;
}

#menu-body {
   padding: 0px;
   margin: -1px;
}
* html #menu-body {
   margin: -2px;
}

#menu-body:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

/* Hide from Mac IE, Windows IE uses this as it doesn't support the :after method above \*/
#menu-body {
   height: 1%;
}

.panel_menu {
   margin: 0px;
   background-color: #fff;
   border: 1px solid #CDCDCD;
   padding: 0 0 10px 0;
}

/* rajout si image trop grande en mode simple */
.panel_menu_simple {
   margin: 0px;
   background-color: #fff;
   border: 1px solid #CDCDCD;
   padding: 0 0 10px 0;
   overflow-x:auto;
   width:100%;
}

.left {
   text-align: left;
}

.right {
   text-align: right;
}
</style>

<div id="add_mod_dragdrop" style="width: 100%; padding: 2px 0px 0px; display: block;"><div id="menu-body"><div id="tabs_menu"><ul><li id="activetab"><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-left:1px solid #CDCDCD;"><span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodexist_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.lastChild.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';}">Widgets predefinidos</span></a></li><li><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-right:1px solid #CDCDCD;"><span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodperso_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.firstChild.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';}">Widgets pessoais</span></a></li></ul></div></div><div class="panel_menu"><table cellpadding="0" cellspacing="3px" border="0" id="addmodexist_draganddrop_table"><tbody><tr><td width="20%" style="padding:0;"><div id="addmod_-12" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Calendário</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-10" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Galeria</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-11" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Palavras chave</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-13" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Login</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-9" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os que mais criam tópicos</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-7" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos mais ativos</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-8" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos mais visitados</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-1" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Novidades</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-19" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos similares</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-2" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Tópicos recentes</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-16" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Flux RSS</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-3" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Procurar</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-14" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Social bookmarking</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-4" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Votação</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-5" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Estatísticas</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-15" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Top dos mais postadores</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-18" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os membros mais ativos do mês</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-17" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Os membros mais ativos da semana</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-6" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Quem está conectado?</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr></tbody></table><table width="100%" cellpadding="0" cellspacing="3px" border="0" id="addmodperso_draganddrop_table" style="display:none;"><tbody><tr><td width="20%" style="padding:0;"><div id="addmod_-30" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Fórum</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td></tr><tr><td width="20%" style="padding:0;"><div id="addmod_-33" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Like/Tweet/+1</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"><div id="addmod_-31" class="block_portal_struct cursor_move"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><th><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td style="display:none" align="left" width="10%"> </td><td style="display:none" align="left" width="10%"> </td><td align="center" class="catLeft" style="height:2em;"><strong>Navegação</strong></td><td style="display:none" align="right" width="10%"> </td><td style="display:none" align="right" width="10%"> </td></tr></tbody></table></th></tr></tbody></table></div></td><td width="20%" style="padding:0;"></div></td></tr></tbody></table></div></div>

Melhores cumprimentos.

O efeito era esse mesmo Today, de mudar o conteúdo só ao clicar com o mouse, mas não está bem do jeito que eu quero , é quase isso.

Se pudesse como aplicar este efeito de só mostrar o conteúdo ao clicar na aba neste código aqui seria perfeito para mim :

Código:

<div class="gensmall"><script type="text/javascript">
  //<!--
      function change_separador(name)
      {
        document.getElementById('separador_'+anc_separador).className = 'separador_0 separador';
        document.getElementById('separador_'+name).className = 'separador_1 separador';
        document.getElementById('contenu_separador_'+anc_separador).style.display = 'none';
        document.getElementById('contenu_separador_'+name).style.display = 'block';
        anc_separador = name;
      }
  //-->
</script>
<style type="text/css">

.contenu_separador
{
      margin-top: 5px;
      padding:5px;
      display:none;
}

.separadores {
      text-align: center;
}
.separador
{
      font-size: 12px;
      display:inline-block;
      margin-left:3px;
      margin-right:3px;
      padding:3px;
      border: 1px solid black;
      width:150px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -khtml-border-radius: 5px;
      -webkit-border-radius: 5px;
      box-shadow: 1px 1px 3px #00FF00;
      -moz-box-shadow: 1px 1px 3px #00FF00;
      -khtml-box-shadow: 1px 1px 3px #00FF00;
      -webkit-box-shadow: 1px 1px 3px #00FF00;
}

.separador_0
{
      background:#363636;
      font-weight: bold;
      width: 150px;
}
.separador_1
{
      background: #9C9C9C;
      font-weight: bold;
      box-shadow: inset 1px 1px 3px #0000FF;
      -moz-box-shadow: inset 1px 1px 3px #0000FF;
      -khtml-box-shadow: inset 1px 1px 3px #0000FF;
      -webkit-box-shadow: inset 1px 1px 3px #0000FF;
      cursor: pointer;
      width: 150px;
}
.contenu_separador
{
      margin-top: 5px;
      padding:5px;
      display:none;
}
ul
{
      margin-top:0px;
      margin-bottom:0px;
      margin-left:-10px
}
h1
{
      margin:0px;
      padding:0px;
}



</style>

<p style="text-align: center; font-weight: bold; font-size: 14px;">MENSAGEM INICIAL</p><div class="systeme_separadores"><div class="separadores">
        <span class="separador_1 separador" id="separador_ros" onmouseover="javascript:change_separador('ros');">TITULO ABA 001</span>
                <span class="separador_0 separador" id="separador_kar" onmouseover="javascript:change_separador('kar');">TITULO ABA 002</span>
          <span class="separador_0 separador" id="separador_kumo" onmouseover="javascript:change_separador('kumo');">TITULO ABA 003</span>
  <span class="separador_0 separador" id="separador_kiri" onmouseover="javascript:change_separador('kiri');">TITULO ABA 004</span>


</div>


<div class="contenu_separadores" style="font-size: 12px;">
  <div style="display: block; " class="contenu_separador" id="contenu_separador_ros">
      <center><div>CONTEUDO ABA 001</div></center></div>



<div class="contenu_separador" id="contenu_separador_kar" style="display: none; ">
<center>CONTEUDO ABA 002</center></div>

  <div class="contenu_separador" id="contenu_separador_kumo" style="display: none; ">
  <center>CONTEUDO ABA 003</center>
  </div>
  <div class="contenu_separador" id="contenu_separador_kiri" style="display: none; ">

      <div><center>CONTEUDO ABA 004</center></div>

 
 
 

  </div>
</div>
<script type="text/javascript">
//<!--
  var anc_separador = 'ros';
  change_separador(anc_separador);
//-->
</script></div>


<center>TEXTO RODAPÉ DE TODAS AS ABAS</center></div>

Caso não consiga aplicar o efeito de aparecer o conteúdo ao clicar com o mouse no código que eu passe acima, poderia ao menos personalizar a aparência das abas do código que você me passou e deixar arredondado e separado ( modelo semelhante ao código que passei acima ) e deixando-o com 4 abas.

Eu consegui editar o código que você me passou mas não consegui mudar a aparência das abas nem consegui adicionar mais abas.

Este é o código que você me passou o qual eu editei e removi o conteúdo , deixando pronto para ser personalizado:

Código:

<style>

/*
Sous-menu images, groupes, forums
*/
#tabs_menu {
  margin: 0px 1px 0px 0px;
}

#tabs_menu ul {
  list-style: none;
}

#tabs_menu li {
  display: inline;
  font-size: 1em;
  font-weight: bold;
}

#tabs_menu a {
  background:#363636;
  padding-left:6px;
  text-decoration: none;
  position: relative;
  height: 32px;
  cursor: hand;
}
#tabs_menu a span {
  display: block;
  background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
  padding: 7px 12px 6px 6px;
  color: #706262;
  white-space: nowrap;
  vertical-align:bottom ;
  height: 20px;
}
* html #tabs_menu a span {
  display: block;
  background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% 0px;
  padding: 7px 12px 6px 6px;
  color: #706262;
  white-space: nowrap;
  vertical-align:bottom ;
  width: 50px;
}
#tabs_menu a, #tabs_menu a span {
  float:left;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs_menu a span {
  float:none;
}
/* End hack */

#tabs_menu a:hover span {
  color: #00a5cd;
}

#tabs_menu #activetab a {
  background-position: 0 -33px;
}

#tabs_menu #activetab a span {
  background: url(http://2img.net/i/fa/admin/icones/menu/sub_right1.png) no-repeat 100% -33px;
  color:#7cba2c;
}

#tabs_menu #activetab a:hover span {
  color: #00a5cd;
}

#menu-body {
  padding: 0px;
  margin: -1px;
}
* html #menu-body {
  margin: -2px;
}

#menu-body:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Hide from Mac IE, Windows IE uses this as it doesn't support the :after method above \*/
#menu-body {
  height: 1%;
}

.panel_menu {
  margin: 0px;
  background-color: #000000;
  border: 1px solid #CDCDCD;
  padding: 0 0 10px 0;
}

/* rajout si image trop grande en mode simple */
.panel_menu_simple {
  margin: 0px;
  background-color: #fff;
  border: 1px solid #CDCDCD;
  padding: 0 0 10px 0;
  overflow-x:auto;
  width:100%;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

</style>
<div id="add_mod_dragdrop" style="width: 100%; padding: 2px 0px 0px; display: block;"><div id="menu-body"><div id="tabs_menu"><ul><li id="activetab"><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-left:1px solid #CDCDCD;">

<span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodexist_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.lastChild.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';}">TITULO ABA 1</span></a></li><li><a style="cursor:pointer;float:left;border-top:1px solid #CDCDCD;border-right:1px solid #CDCDCD;">


<span onclick="javascript:if(this.parentNode.parentNode.id=='activetab') {this.parentNode.parentNode.id='';document.getElementById('addmodperso_draganddrop_table').style.display='none';} else {this.parentNode.parentNode.id='activetab';document.getElementById('addmodperso_draganddrop_table').style.display='';this.parentNode.parentNode.parentNode.firstChild.id='';document.getElementById('addmodexist_draganddrop_table').style.display='none';}">TITULO ABA 2</span></a></li></ul></div></div><div class="panel_menu">

<table id="addmodexist_draganddrop_table" border="0" cellpadding="0" cellspacing="3px"><tbody><tr><td style="padding:0;" width="20%"><center>CONTEUDO ABA 1</center></td></tr></tbody></table>


<table id="addmodperso_draganddrop_table" style="display:none;" border="0" cellpadding="0" cellspacing="3px" width="100%"><tbody><tr><td style="padding:0;" width="20%"><center>CONTEUDO ABA 2</center></td></tr></tbody></table></div></div>


Desde já agradeço caso consiga atender ...

Consegui resolver o problema, depois de muito pesquisar descobri que a resposta é bem simples, muito me espanta que pessoas tão experientes não tenham conseguido responder algo tão obvio.

Era só mudar o código:

onmouseover por onclick.

Assunto resolvido...