Detalhes da questão

Endereço do fórum: https://bulbarpg.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Boa tarde.
Estava a tentar editar um code em HTML que o meu fórum possui, porém embati numa parede.
Atualmente ao colocar um Link, ele aparece depois no pop-up a vermelho e com um desfoque nas letras:


Isto torna a leitura quase impossivel.
A minha questão é também um pedido de ajuda por algum editor de Texto em HTML, no qual eu pudesse escrever e depois copiar para o code final.

No caso eu queria pelo menos os codes simples para:
-- Colocar um Link como Texto
(que eu penso ser:  <a href="/about/about_team.htm">team</a>)
-- Colocar um Link como Texto num Tamanho Maior e a Negrito (e se possivel sublinhado)

Deixo também o code que deve ser necessário:

Código:

<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
  
 <div class="acessoTapido_topo">
 Acesso rápido
 </div>
     <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />        
 <div class="temp_acesso">
  
 <div class="dropdown">
  
 <div class="dropdown-content">
<a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
  <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a>    
<a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a>    
<a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a>    
<a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a>    
<a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a>    
<a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a>    
<a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>  
</div>
</div>
  
 <div style="overflow: hidden;" id="acs01" class="acesso_corpo">
                 <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                  
                 </div>
  
  
 <div style="display: none" id="acs03" class="acesso_corpo">
                  
                  Aba 2
                  
 </div>
  
 <div style="display: none" id="acs04" class="acesso_corpo">
                  
                  Aba 3
                  
 </div>
  
 <div style="display: none" id="acs05" class="acesso_corpo">
                  
                  Aba 4
                  
 </div>
  
 <div style="display: none" id="acs06" class="acesso_corpo">
                  
                  Aba 5
                  
 </div>
  
 <div style="display: none" id="acs07" class="acesso_corpo">
                
                  Aba 6
 </div>
          
          <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
          
          Aba 7
          
          </div>
 <style>
::-webkit-scrollbar-track {
    background-color: #F4F4F4;
}
::-webkit-scrollbar {
    width: 6px;
    background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
    background: #dad7d7;
}
  
.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  font-family: roboto;
  text-transform: uppercase;
}

.dropdown-content {
    background-color: #4a4949;
    font-family: Roboto;
    width: 207px;
    margin: 250px 0px 0px 0px;
    border: 10px solid #232323;
    outline: 1px solid #4e4e4e;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 11px;
  cursor: pointer;
  text-transform: initial;
}
</style>     <style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #e0333d;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 7px 10px;
    position: absolute;
    z-index: 1;
    margin: -25px 0px 0px 10px;
    width: 55px;
    font-size: 10px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style> <style>
  temp {
  height: 600px;
  width: 720px;
  border: 0px;
  margin: auto;
  display: block;
  font-family: roboto;  
}
  
  temp a {
  text-decoration: none;
  }

.acessoTapido_topo {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 400;
    color: white;
    background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
    padding: 20px 15px;
font-family: 'chronos_serifstroked';
          letter-spacing: -5px;
}

.acessorapido_field {
    background: #fff;
    border: 1px solid #e7e7e7
}

.acessorapido_field i {
    font-size: 30px;
    background: #e0333d;
    text-align: center;
    padding: 20px;
    color: #fff;
    width: 30px;
    margin: 0px 5px;
}

div#fld1 {
    margin: 10px 0px 10px 238px;
    padding: 30px;
}
  
img.acessRapido_img {
    width: 227px;
    height: 227px;
    position: absolute;
    margin: 10px 0px;
}
 
.dropdown-content a i {
    float: right;
}
  
.dropdown-content a i {
    float: right;
}

.dropdown-content a:hover {
    background: #e7e7e7;
}
  
.acesso_corpo {
    background: #232323;
    color: white;
    display: block;
    position: absolute;
    width: 435px;
    margin: -520px 0px 0px 243px;
    border: 1px solid #2b2b2b;
    padding: 20px;
    min-height: 477px;
    font-size: 11px;
    text-align: justify;
    line-height: 18px;
    overflow: auto;
    max-height: 335px;
}

.acesso_corpo a {
    font-weight: 900;
    color: #e0333d;
    text-shadow: 0px 0px 5px #e8e8e8;
}
  
.acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
</style>   <style>
table.acessoRapido_tabela td {
    padding: 20px;
    width: 180px;
    margin-top: 10px!important
    }

table.acessoRapido_tabela a {
    display: block;
    line-height: 20px;
    padding: 9.5px 0px;
    font-size: 13px;
    font-weight: 300;
  border-bottom: 1px solid #E0E0E0!important;
}

table.acessoRapido_tabela a i {
    font-size: 10px;
}
  
table.acessoRapido_tabela {
    margin: auto;
    outline: 1px solid #e7e7e7;
}

table.acessoRapido_tabela td {
    vertical-align: baseline;
}

table.acessoRapido_tabela a:hover {
    font-weight: 900;
    border-color: #198fc3;
}  
          
@font-face {
    font-family: 'chronos_serifstroked';
    src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>     <script>    
  $(document).ready(function() {
    $('.dropdown-content a').click(function () {
      var getId = $(this).attr('id');
      
      $('.acesso_corpo').hide();
      $('.acesso_corpo#' + getId).show();
      $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
      $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
    });
  });
  </script>  
 </div>
</div>

Obrigado desde já

Olá, não entendi muito bem a sua dúvida. Você deseja alterar a aparência do link na página html repassada acima?

A questão crucial é deixar o Link sem aquele vermelho e blur que esta no "Tudo sobre Classes".
Já tentei algumas coisas mas está sempre a aparecer.

Adicionalmente queria saber se alguem sabe de um editor de HTML que seja fácil de usar pois para o que estou a fazer queria colocar tambem o Link numa Font maior e a negrito ocasionalmente

Certo, vamos lá. No código passado acima pelo senhor existe a classe .acesso_corpo a, ela define a aparência do link. Para a edição de página html existe a opção do console do navegador, pouco recomendavel, existe o visual code studio, um aplicativo para desktop, e existe opções online, como o jsfiddle, muito bom.

https://jsfiddle.net/

Pois, eu não percebo nada de HTML e percebo que essa classe define a aparencia, mas mesmo assim, nao sei como alterar.

Em relação aos aplicativos eu acho que encontrei uns. Os que voce referiu é para escrever em HTML, o que eu quero é um que tenha esses atalhos que nem um word (para negrito, aumentar a font, etc etc)

Altere a página html para o código abaixo.
Não sei se existem editores desta forma.

Código:


<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
 
 <div class="acessoTapido_topo">
 Acesso rápido
 </div>
    <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />       
 <div class="temp_acesso">
 
 <div class="dropdown">
 
 <div class="dropdown-content">
<a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
  <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a>   
<a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a>   
<a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a>   
<a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a>   
<a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a>   
<a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a>   
<a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a> 
</div>
</div>
 
 <div style="overflow: hidden;" id="acs01" class="acesso_corpo">
                <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                 
                </div>
 
 
 <div style="display: none" id="acs03" class="acesso_corpo">
                 
                  Aba 2
                 
 </div>
 
 <div style="display: none" id="acs04" class="acesso_corpo">
                 
                  Aba 3
                 
 </div>
 
 <div style="display: none" id="acs05" class="acesso_corpo">
                 
                  Aba 4
                 
 </div>
 
 <div style="display: none" id="acs06" class="acesso_corpo">
                 
                  Aba 5
                 
 </div>
 
 <div style="display: none" id="acs07" class="acesso_corpo">
               
                  Aba 6
 </div>
         
          <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
         
          Aba 7
         
          </div>
 <style>
::-webkit-scrollbar-track {
    background-color: #F4F4F4;
}
::-webkit-scrollbar {
    width: 6px;
    background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
    background: #dad7d7;
}
 
.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  font-family: roboto;
  text-transform: uppercase;
}
 
.dropdown-content {
    background-color: #4a4949;
    font-family: Roboto;
    width: 207px;
    margin: 250px 0px 0px 0px;
    border: 10px solid #232323;
    outline: 1px solid #4e4e4e;
}
 
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 11px;
  cursor: pointer;
  text-transform: initial;
}
</style>    <style>
.tooltip {
  position: relative;
  display: inline-block;
}
 
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #e0333d;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 7px 10px;
    position: absolute;
    z-index: 1;
    margin: -25px 0px 0px 10px;
    width: 55px;
    font-size: 10px;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style> <style>
  temp {
  height: 600px;
  width: 720px;
  border: 0px;
  margin: auto;
  display: block;
  font-family: roboto; 
}
 
  temp a {
  text-decoration: none;
  }
 
.acessoTapido_topo {
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 400;
    color: white;
    background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
    padding: 20px 15px;
font-family: 'chronos_serifstroked';
          letter-spacing: -5px;
}
 
.acessorapido_field {
    background: #fff;
    border: 1px solid #e7e7e7
}
 
.acessorapido_field i {
    font-size: 30px;
    background: #e0333d;
    text-align: center;
    padding: 20px;
    color: #fff;
    width: 30px;
    margin: 0px 5px;
}
 
div#fld1 {
    margin: 10px 0px 10px 238px;
    padding: 30px;
}
 
img.acessRapido_img {
    width: 227px;
    height: 227px;
    position: absolute;
    margin: 10px 0px;
}
 
.dropdown-content a i {
    float: right;
}
 
.dropdown-content a i {
    float: right;
}
 
.dropdown-content a:hover {
    background: #e7e7e7;
}
 
.acesso_corpo {
    background: #232323;
    color: white;
    display: block;
    position: absolute;
    width: 435px;
    margin: -520px 0px 0px 243px;
    border: 1px solid #2b2b2b;
    padding: 20px;
    min-height: 477px;
    font-size: 11px;
    text-align: justify;
    line-height: 18px;
    overflow: auto;
    max-height: 335px;
}
 
.acesso_corpo a {
    font-weight: 700;
}
 
.acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}

table.acessoRapido_tabela td {
    padding: 20px;
    width: 180px;
    margin-top: 10px!important
    }
 
table.acessoRapido_tabela a {
    display: block;
    line-height: 20px;
    padding: 9.5px 0px;
    font-size: 13px;
    font-weight: 300;
  border-bottom: 1px solid #E0E0E0!important;
}
 
table.acessoRapido_tabela a i {
    font-size: 10px;
}
 
table.acessoRapido_tabela {
    margin: auto;
    outline: 1px solid #e7e7e7;
}
 
table.acessoRapido_tabela td {
    vertical-align: baseline;
}
 
table.acessoRapido_tabela a:hover {
    font-weight: 900;
    border-color: #198fc3;
} 
         
@font-face {
    font-family: 'chronos_serifstroked';
    src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>    <script>   
  $(document).ready(function() {
    $('.dropdown-content a').click(function () {
      var getId = $(this).attr('id');
     
      $('.acesso_corpo').hide();
      $('.acesso_corpo#' + getId).show();
      $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
      $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
    });
  });
  </script> 
 </div>
</div>


Seu code tirou aquele brilho estranho, mas agora o Link esta a roxo :/

Sobre editores, o que eu estou usando é este:
https://wordtohtml.net/

Diga a cor desejada do link, se ele é em negrito e tal.

Connor R. escreveu:Diga a cor desejada do link, se ele é em negrito e tal.

A cor desejada é branco, e negrito sim

Olá @L Mars!
Tudo bem querida?!

Enfim, andei notando o seu pedido. Creio que seja este modelo abaixo:

Código:

<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
 
    <div class="acessoTapido_topo">
    Acesso rápido
    </div>
      <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />     
    <div class="temp_acesso">
   
    <div class="dropdown">
   
    <div class="dropdown-content">
  <a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
    <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a> 
  <a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a> 
  <a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a> 
  <a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a> 
  <a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a> 
  <a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a> 
  <a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>
  </div>
  </div>
   
    <div style="overflow: visible;text-decoration: none;font-weight: bold;" id="acs01" class="acesso_corpo">
                  <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                   
                  </div>
   
   
    <div style="display: none" id="acs03" class="acesso_corpo">
                   
                    Aba 2
                   
    </div>
   
    <div style="display: none" id="acs04" class="acesso_corpo">
                   
                    Aba 3
                   
    </div>
   
    <div style="display: none" id="acs05" class="acesso_corpo">
                   
                    Aba 4
                   
    </div>
   
    <div style="display: none" id="acs06" class="acesso_corpo">
                   
                    Aba 5
                   
    </div>
   
    <div style="display: none" id="acs07" class="acesso_corpo">
                 
                    Aba 6
    </div>
           
            <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
           
            Aba 7
           
            </div>
    <style>
    a {
        color: white;
    }
  ::-webkit-scrollbar-track {
      background-color: #F4F4F4;
  }
  ::-webkit-scrollbar {
      width: 6px;
      background: #F4F4F4;
  }
  ::-webkit-scrollbar-thumb {
      background: #dad7d7;
  }
   
  .dropdown {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-family: roboto;
    text-transform: uppercase;
  }
   
  .dropdown-content {
      background-color: #4a4949;
      font-family: Roboto;
      width: 207px;
      margin: 250px 0px 0px 0px;
      border: 10px solid #232323;
      outline: 1px solid #4e4e4e;
  }
   
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 11px;
    cursor: pointer;
    text-transform: initial;
  }
  </style>
    <style>
  .tooltip {
    position: relative;
    display: inline-block;
  }
   
  .tooltip .tooltiptext {
      visibility: hidden;
      background-color: #e0333d;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      padding: 7px 10px;
      position: absolute;
      z-index: 1;
      margin: -25px 0px 0px 10px;
      width: 55px;
      font-size: 10px;
  }
   
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </style> <style>
    temp {
    height: 600px;
    width: 720px;
    border: 0px;
    margin: auto;
    display: block;
    font-family: roboto;
  }
   
    temp a {
    text-decoration: none;
    }
   
  .acessoTapido_topo {
      text-align: center;
      font-size: 50px;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
      background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
      padding: 20px 15px;
  font-family: 'chronos_serifstroked';
            letter-spacing: -5px;
  }
   
  .acessorapido_field {
      background: #fff;
      border: 1px solid #e7e7e7
  }
   
  .acessorapido_field i {
      font-size: 30px;
      background: #e0333d;
      text-align: center;
      padding: 20px;
      color: #fff;
      width: 30px;
      margin: 0px 5px;
  }
   
  div#fld1 {
      margin: 10px 0px 10px 238px;
      padding: 30px;
  }
   
  img.acessRapido_img {
      width: 227px;
      height: 227px;
      position: absolute;
      margin: 10px 0px;
  }
   
  .dropdown-content a i {
      float: right;
  }
   
  .dropdown-content a i {
      float: right;
  }
   
  .dropdown-content a:hover {
      background: #e7e7e7;
  }
   
  .acesso_corpo {
      background: #232323;
      color: white;
      display: block;
      position: absolute;
      width: 435px;
      margin: -520px 0px 0px 243px;
      border: 1px solid #2b2b2b;
      padding: 20px;
      min-height: 477px;
      font-size: 11px;
      text-align: justify;
      line-height: 18px;
      overflow: auto;
      max-height: 335px;
  }
   
  .acesso_corpo a {
      font-weight: 700;
  }
   
  .acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
   
  table.acessoRapido_tabela td {
      padding: 20px;
      width: 180px;
      margin-top: 10px!important
      }
   
  table.acessoRapido_tabela a {
      display: block;
      line-height: 20px;
      padding: 9.5px 0px;
      font-size: 13px;
      font-weight: 300;
    border-bottom: 1px solid #E0E0E0!important;
  }
   
  table.acessoRapido_tabela a i {
      font-size: 10px;
  }
   
  table.acessoRapido_tabela {
      margin: auto;
      outline: 1px solid #e7e7e7;
  }
   
  table.acessoRapido_tabela td {
      vertical-align: baseline;
  }
   
  table.acessoRapido_tabela a:hover {
      font-weight: 900;
      border-color: #198fc3;
  }
           
  @font-face {
      font-family: 'chronos_serifstroked';
      src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  </style>    <script> 
    $(document).ready(function() {
      $('.dropdown-content a').click(function () {
        var getId = $(this).attr('id');
       
        $('.acesso_corpo').hide();
        $('.acesso_corpo#' + getId).show();
        $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
        $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
      });
    });
    </script>
    </div>
  </div>


Caso não seja, aguardamos respostas para auxiliar você de outra forma!

Atenciosamente,
Wusthy <3

Wusthy escreveu:Olá  @L Mars!
Tudo bem querida?!

Enfim, andei notando o seu pedido. Creio que seja este modelo abaixo:

Código:

<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
 
    <div class="acessoTapido_topo">
    Acesso rápido
    </div>
       <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />      
    <div class="temp_acesso">
    
    <div class="dropdown">
    
    <div class="dropdown-content">
   <a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
     <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a>  
   <a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a>  
   <a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a>  
   <a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a>  
   <a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a>  
   <a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a>  
   <a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>
   </div>
   </div>
    
    <div style="overflow: visible;text-decoration: none;font-weight: bold;" id="acs01" class="acesso_corpo">
                   <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                    
                   </div>
    
    
    <div style="display: none" id="acs03" class="acesso_corpo">
                    
                     Aba 2
                    
    </div>
    
    <div style="display: none" id="acs04" class="acesso_corpo">
                    
                     Aba 3
                    
    </div>
    
    <div style="display: none" id="acs05" class="acesso_corpo">
                    
                     Aba 4
                    
    </div>
    
    <div style="display: none" id="acs06" class="acesso_corpo">
                    
                     Aba 5
                    
    </div>
    
    <div style="display: none" id="acs07" class="acesso_corpo">
                  
                     Aba 6
    </div>
            
             <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
            
             Aba 7
            
             </div>
    <style>
    a {
        color: white;
    }
   ::-webkit-scrollbar-track {
       background-color: #F4F4F4;
   }
   ::-webkit-scrollbar {
       width: 6px;
       background: #F4F4F4;
   }
   ::-webkit-scrollbar-thumb {
       background: #dad7d7;
   }
    
   .dropdown {
     position: relative;
     display: inline-block;
     margin-right: 10px;
     font-family: roboto;
     text-transform: uppercase;
   }
    
   .dropdown-content {
       background-color: #4a4949;
       font-family: Roboto;
       width: 207px;
       margin: 250px 0px 0px 0px;
       border: 10px solid #232323;
       outline: 1px solid #4e4e4e;
   }
    
   .dropdown-content a {
     color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     font-size: 11px;
     cursor: pointer;
     text-transform: initial;
   }
   </style>
    <style>
   .tooltip {
     position: relative;
     display: inline-block;
   }
    
   .tooltip .tooltiptext {
       visibility: hidden;
       background-color: #e0333d;
       color: #fff;
       text-align: center;
       border-radius: 3px;
       padding: 7px 10px;
       position: absolute;
       z-index: 1;
       margin: -25px 0px 0px 10px;
       width: 55px;
       font-size: 10px;
   }
    
   .tooltip:hover .tooltiptext {
     visibility: visible;
   }
   </style> <style>
     temp {
     height: 600px;
     width: 720px;
     border: 0px;
     margin: auto;
     display: block;
     font-family: roboto;
   }
    
     temp a {
     text-decoration: none;
     }
    
   .acessoTapido_topo {
       text-align: center;
       font-size: 50px;
       text-transform: uppercase;
       font-weight: 400;
       color: white;
       background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
       padding: 20px 15px;
   font-family: 'chronos_serifstroked';
             letter-spacing: -5px;
   }
    
   .acessorapido_field {
       background: #fff;
       border: 1px solid #e7e7e7
   }
    
   .acessorapido_field i {
       font-size: 30px;
       background: #e0333d;
       text-align: center;
       padding: 20px;
       color: #fff;
       width: 30px;
       margin: 0px 5px;
   }
    
   div#fld1 {
       margin: 10px 0px 10px 238px;
       padding: 30px;
   }
    
   img.acessRapido_img {
       width: 227px;
       height: 227px;
       position: absolute;
       margin: 10px 0px;
   }
    
   .dropdown-content a i {
       float: right;
   }
    
   .dropdown-content a i {
       float: right;
   }
    
   .dropdown-content a:hover {
       background: #e7e7e7;
   }
    
   .acesso_corpo {
       background: #232323;
       color: white;
       display: block;
       position: absolute;
       width: 435px;
       margin: -520px 0px 0px 243px;
       border: 1px solid #2b2b2b;
       padding: 20px;
       min-height: 477px;
       font-size: 11px;
       text-align: justify;
       line-height: 18px;
       overflow: auto;
       max-height: 335px;
   }
    
   .acesso_corpo a {
       font-weight: 700;
   }
    
   .acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
    
   table.acessoRapido_tabela td {
       padding: 20px;
       width: 180px;
       margin-top: 10px!important
       }
    
   table.acessoRapido_tabela a {
       display: block;
       line-height: 20px;
       padding: 9.5px 0px;
       font-size: 13px;
       font-weight: 300;
     border-bottom: 1px solid #E0E0E0!important;
   }
    
   table.acessoRapido_tabela a i {
       font-size: 10px;
   }
    
   table.acessoRapido_tabela {
       margin: auto;
       outline: 1px solid #e7e7e7;
   }
    
   table.acessoRapido_tabela td {
       vertical-align: baseline;
   }
    
   table.acessoRapido_tabela a:hover {
       font-weight: 900;
       border-color: #198fc3;
   }
            
   @font-face {
       font-family: 'chronos_serifstroked';
       src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   </style>    <script>  
     $(document).ready(function() {
       $('.dropdown-content a').click(function () {
         var getId = $(this).attr('id');
        
         $('.acesso_corpo').hide();
         $('.acesso_corpo#' + getId).show();
         $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
         $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
       });
     });
     </script>
    </div>
   </div>


Caso não seja, aguardamos respostas para auxiliar você de outra forma!

Atenciosamente,
Wusthy <3

Ok, ficou perfeito agora e, entretanto encontrei um bom editor de HTML online que ajuda IMENSO para quem não percebe muito do HTML basico. É quase como um word, e depois só tenho de copiar.

EDIT: Percebi agora que não há muita diferença (ou não há diferença) entre um texto a negrito (strong) ou normal.
Poderia ver se dava para fazer essa distinção melhor? :X

Porem, ao preparar o primeiro menu deparei-me com um pequeno bug visual:

Aquele fundo negro acaba abruptamente. Provavelmente esta definido para apenas ter y Pixels de altura, mas se for algo extenso, como é este menu, fica um pouco feio.
Dava para pedir ajuda neste topico de forma a corrigir isso? Nem que seja um scroll interno, dentro desse menu, ou que pelo menos ao fazer scroll para baixo que a caixa negra de fundo (mais escura) acompanha-se a zona de texto.

Obrigado desde já

Olá @L Mars

Creio que este modelo venha funcionar para ti, copie abaixo à sua página HTML editada:

Código:

<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" />
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" />
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" />
<link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" />
<link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<div class="acessoTapido_topo">
    Acesso rápido
    </div>
      <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />   
    <div class="temp_acesso">
 
    <div class="dropdown">
 
    <div class="dropdown-content">
  <a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
    <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a>
  <a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a>
  <a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a>
  <a id="acs05"><em class="fas fa-angle-double-right"></em> Forms</a>
  <a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a>
  <a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a>
  <a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>
  </div>
  </div>
 
    <div style="overflow: visible;text-decoration: none;font-weight: bold;display: table;" id="acs01" class="acesso_corpo">
<h2><strong><span style="text-decoration: underline;"><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre </a></span><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023"><span style="text-decoration: underline;"><strong>Classes</strong></span></a></strong></h2>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130024">Treinador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130036">Coordenador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130037">Pesquisador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130046">Ranger</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130047">Purificador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130048">Iniciante</a></li>
</ul>
<h2><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130050"><span style="text-decoration: underline;"><strong>Especialização </strong>(Tamer)</span></a></h2>
<h2><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130051"><strong><span style="text-decoration: underline;">Tudo sobre Sub-Classes</span></strong></a></h2>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130053">Lutador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130055">Evoluidor</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130058">Caretaker</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130059">Criador</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130079">Inversor</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130080">Magnata</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130103">Guardião de Aura</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130180">Burst Warrior</a></li>
</ul>
<h2><span style="text-decoration: underline;"><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130223"><strong>Tudo sobre Profissões</strong></a></span></h2>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130225">Criador de Pokeballs</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130226">Criador de Berries & Apricorns</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130227">Criador de TM's</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130239">Bruxo</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130249">Shaman</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130264">Herbalista</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416p25-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130266">Mineralista</a></li>
</ul>
<h2><a href="https://bulbarpg.forumeiros.com/t8416p25-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130274"><strong><span style="text-decoration: underline;">Tudo sobre Facções</span></strong></a></h2>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t8416p25-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130275">Policia & Criminoso</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416p25-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130276">Religioso</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t8416p25-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#144023">Elementalista</a></li>
</ul>
      </div>
     
     
    <div style="display: none" id="acs03" class="acesso_corpo">
<h3><span style="text-decoration: underline;"><strong><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg">Regras do Fórum & RPG</a></strong></span></h3>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153146">Criação da Ficha&nbsp;</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153151">Classes & Provas de Valor&nbsp;</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153155">Ficha Pokémon</a> </li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153156">Movimentar-se no RPG</a> </li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153157">Eventos & Progressão</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153157">Sistema de Dia & Noite, Clima e Estações</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153295">Combate</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153306">Combate Normal & Combate Automático, Combate em Horde</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153379">Curar o seu Pokémon</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153380">Captura de Pokémons</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153389">Ganho de Experiência</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153391">Ganho de Dinheiro</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153404">Sistema de Felicidade</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153409">Sistema de Breeding</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153410">Sistema de Metas</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153411">Sistema de Battle Forms</a> <em>(Mega, Cristal, Gigantamax)</em></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153412">Sistema de Vitaminas</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153414">Sistema de Fama</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153416">Sistema de Apadrinhamento</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#153427">Sistema de Cromos</a><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#194220"></a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#194220">Avistamento de Lendários em Route</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t9610-regras-do-forum-e-rpg#246330">Derrota & Morte do Pokémon</a></li>
</ul>
<h3><a href="https://bulbarpg.forumeiros.com/t11795-regra-guia-sistema-de-dados"><strong><span style="text-decoration: underline;">Sistema de Dados</span></strong></a></h3>
<h3><span style="text-decoration: underline;"><strong><a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes">Classes, Sub-Classes, Profissões & Facções</a></strong></span></h3>
<p><a href="https://bulbarpg.forumeiros.com/t10699-regra-guia-pokemons-produtores">Pokémons Produtores</a></p>
<p><a href="https://bulbarpg.forumeiros.com/t12801-regra-guia-sub-types">Sub-Types</a></p>
<p><a href="https://bulbarpg.forumeiros.com/t12823-regra-guia-status-condition">Status Condition</a></p>
<p><a href="https://bulbarpg.forumeiros.com/t12821-regra-guia-entry-hazards">Entry Hazards (Armadilhas)</a><a href="https://bulbarpg.forumeiros.com/t12801-regra-guia-sub-types"></a></p>
<p><a href="https://bulbarpg.forumeiros.com/t11383-regra-guia-climas-terrains">Climas & Terrains</a></p>
<p><a href="https://bulbarpg.forumeiros.com/t11983-regra-guia-modos-de-batalha">Modos de Batalha</a></p>
<p><a href="https://bulbarpg.forumeiros.com/t10750-regra-guia-evolucao-pokemon">Evolução Pokémon</a></p>         
    </div>
 
    <div style="display: none" id="acs04" class="acesso_corpo">
                 
                  <h2><a href="https://bulbarpg.forumeiros.com/f372-guias"><span style="text-decoration: underline;"><strong>Guias do Fórum</strong></span></a></h2>
<ul>
<li><a href="https://bulbarpg.forumeiros.com/t13487-guia-00-nocoes-basicas-de-forum-e-rpg">Noções Básicas de Fórum & RPG</a></li>
<li><a href="https://bulbarpg.forumeiros.com/t13529-guia-01-guia-do-novato-da-ficha-ao-seu-inicial">Guia do Novato</a> - Da Ficha ao Inicial</li>
</ul>
                 
    </div>
 
    <div style="display: none" id="acs05" class="acesso_corpo">
            <h2><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243564"><strong><span style="text-decoration: underline;">Extra Forms</span></strong></a></h2>
<p><sup>(Pokémons como <strong>Castform, Rotom, Oricorio, </strong>etc)</sup><sup></sup></p>
<h2><strong><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243565"><span style="text-decoration: underline;">Battle Forms</span></a></strong></h2>
<p><sup>(Tudo o que muda a aparência do Pokémon em Combate, como Mega Evolução, Gigantamax e outros)</sup></p>
<h2><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243566"><span style="text-decoration: underline;"><strong>Contest Forms</strong></span></a></h2>
<p><sup>(Pokémons com uma aparência diferente, mas apenas visual)</sup></p>
<h2><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243567"><span style="text-decoration: underline;"><strong>Season Forms</strong></span></a></h2>
<p><sup>(Pokémons com uma aparência e personalidade diferentes, temático para um determinado evento sazonal)</sup></p>
<h2><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243568"><span style="text-decoration: underline;"><strong>Baby Forms</strong></span></a></h2>
<p><sup>(Pokémons Bebés - Quase como uma pré-evolução)</sup></p>
    </div>
 
    <div style="display: none" id="acs06" class="acesso_corpo">
                 
                  <h2><a href="https://bulbarpg.forumeiros.com/t12707-lista-bulba-forms#243563"><strong><span style="text-decoration: underline;">Bulba Forms</span></strong></a></h2>
<p><strong><span style="text-decoration: underline;"></span></strong></p>
                 
    </div>
 
    <div style="display: none" id="acs07" class="acesso_corpo">
               
                    Aba 6
    </div>
         
            <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
         
            Aba 7
         
            </div>
    <style>
    a {
        color: white;
    }
  ::-webkit-scrollbar-track {
      background-color: #F4F4F4;
  }
  ::-webkit-scrollbar {
      width: 6px;
      background: #F4F4F4;
  }
  ::-webkit-scrollbar-thumb {
      background: #dad7d7;
  }
 
  .dropdown {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-family: roboto;
    text-transform: uppercase;
  }
 
  .dropdown-content {
      background-color: #4a4949;
      font-family: Roboto;
      width: 207px;
      margin: 250px 0px 0px 0px;
      border: 10px solid #232323;
      outline: 1px solid #4e4e4e;
  }
 
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 11px;
    cursor: pointer;
    text-transform: initial;
  }
  </style>
    <style>
  .tooltip {
    position: relative;
    display: inline-block;
  }
 
  .tooltip .tooltiptext {
      visibility: hidden;
      background-color: #e0333d;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      padding: 7px 10px;
      position: absolute;
      z-index: 1;
      margin: -25px 0px 0px 10px;
      width: 55px;
      font-size: 10px;
  }
 
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </style> <style>
    temp {
    height: 600px;
    width: 720px;
    border: 0px;
    margin: auto;
    display: block;
    font-family: roboto;
  }
 
    temp a {
    text-decoration: none;
    }
 
  .acessoTapido_topo {
      text-align: center;
      font-size: 50px;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
      background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
      padding: 20px 15px;
  font-family: 'chronos_serifstroked';
            letter-spacing: -5px;
  }
 
  .acessorapido_field {
      background: #fff;
      border: 1px solid #e7e7e7
  }
 
  .acessorapido_field i {
      font-size: 30px;
      background: #e0333d;
      text-align: center;
      padding: 20px;
      color: #fff;
      width: 30px;
      margin: 0px 5px;
  }
 
  div#fld1 {
      margin: 10px 0px 10px 238px;
      padding: 30px;
  }
 
  img.acessRapido_img {
      width: 227px;
      height: 227px;
      position: absolute;
      margin: 10px 0px;
  }
 
  .dropdown-content a i {
      float: right;
  }
 
  .dropdown-content a i {
      float: right;
  }
 
  .dropdown-content a:hover {
      background: #e7e7e7;
  }
 
  .acesso_corpo {
      background: #232323;
      color: white;
      display: block;
      position: absolute;
      width: 435px;
      margin: -520px 0px 0px 243px;
      border: 1px solid #2b2b2b;
      padding: 20px;
      min-height: 477px;
      font-size: 11px;
      text-align: justify;
      line-height: 18px;
      overflow: auto;
      max-height: 335px;
  }
 
  .acesso_corpo a {
      font-weight: 700;
  }
 
  .acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
 
  table.acessoRapido_tabela td {
      padding: 20px;
      width: 180px;
      margin-top: 10px!important
      }
 
  table.acessoRapido_tabela a {
      display: block;
      line-height: 20px;
      padding: 9.5px 0px;
      font-size: 13px;
      font-weight: 300;
    border-bottom: 1px solid #E0E0E0!important;
  }
 
  table.acessoRapido_tabela a i {
      font-size: 10px;
  }
 
  table.acessoRapido_tabela {
      margin: auto;
      outline: 1px solid #e7e7e7;
  }
 
  table.acessoRapido_tabela td {
      vertical-align: baseline;
  }
 
  table.acessoRapido_tabela a:hover {
      font-weight: 900;
      border-color: #198fc3;
  }
         
  @font-face {
      font-family: 'chronos_serifstroked';
      src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  </style>    <script>
    $(document).ready(function() {
      $('.dropdown-content a').click(function () {
        var getId = $(this).attr('id');
     
        $('.acesso_corpo').hide();
        $('.acesso_corpo#' + getId).show();
        $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
        $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
      });
    });
    </script>
    </div>
  </div>


Caso não seja, aguardamos respostas para auxiliar você de outra forma!

Atenciosamente,
Wusthy

Hmm desta vez não ficou muito bom não
Tudo o que era Link no Texto ficou sublinhado e acaba por ficar muito poluido e pouco clean.

Porém ontem depois de fazer o post de ontem, acabei mexendo um pouco no HTML e ficou um pouco melhor. Ou seja, não se preocupe com a parte do aspeto das fonts, está otimo assim!

O que eu queria mesmo é que (vendo o menu) o menu "Classes, Sub-Classes e etc..." ficasse como está o menu "Regras", no qual o scroll acompanha internamente. Dá até para ver as diferenças na barra de scroll que aparece nos dois menus.
Eu já copiei o html de um dos menus para o outro e não houve alterações, então deve ser algum erro noutro lado do code :/

Olá @L Mars

Peço perdão pelo erro, creio que este seguinte modelo venha funcionar:

Código:

<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
 
    <div class="acessoTapido_topo">
    Acesso rápido
    </div>
      <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />     
    <div class="temp_acesso">
   
    <div class="dropdown">
   
    <div class="dropdown-content">
  <a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
    <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a> 
  <a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a> 
  <a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a> 
  <a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a> 
  <a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a> 
  <a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a> 
  <a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>
  </div>
  </div>
   
    <div style="overflow: visible;text-decoration: none;font-weight: bold;max-width: 100%;overflow: scroll" id="acs01" class="acesso_corpo">
                  <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                   
                  </div>
   
   
    <div style="display: none" id="acs03" class="acesso_corpo">
                   
                    Aba 2
                   
    </div>
   
    <div style="display: none" id="acs04" class="acesso_corpo">
                   
                    Aba 3
                   
    </div>
   
    <div style="display: none" id="acs05" class="acesso_corpo">
                   
                    Aba 4
                   
    </div>
   
    <div style="display: none" id="acs06" class="acesso_corpo">
                   
                    Aba 5
                   
    </div>
   
    <div style="display: none" id="acs07" class="acesso_corpo">
                 
                    Aba 6
    </div>
           
            <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
           
            Aba 7
           
            </div>
    <style>
    a {
        color: white;
    }
  ::-webkit-scrollbar-track {
      background-color: #F4F4F4;
  }
  ::-webkit-scrollbar {
      width: 6px;
      background: #F4F4F4;
  }
  ::-webkit-scrollbar-thumb {
      background: #dad7d7;
  }
   
  .dropdown {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-family: roboto;
    text-transform: uppercase;
  }
   
  .dropdown-content {
      background-color: #4a4949;
      font-family: Roboto;
      width: 207px;
      margin: 250px 0px 0px 0px;
      border: 10px solid #232323;
      outline: 1px solid #4e4e4e;
  }
   
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 11px;
    cursor: pointer;
    text-transform: initial;
  }
  </style>
    <style>
  .tooltip {
    position: relative;
    display: inline-block;
  }
   
  .tooltip .tooltiptext {
      visibility: hidden;
      background-color: #e0333d;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      padding: 7px 10px;
      position: absolute;
      z-index: 1;
      margin: -25px 0px 0px 10px;
      width: 55px;
      font-size: 10px;
  }
   
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </style> <style>
    temp {
    height: 600px;
    width: 720px;
    border: 0px;
    margin: auto;
    display: block;
    font-family: roboto;
  }
   
    temp a {
    text-decoration: none;
    }
   
  .acessoTapido_topo {
      text-align: center;
      font-size: 50px;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
      background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
      padding: 20px 15px;
  font-family: 'chronos_serifstroked';
            letter-spacing: -5px;
  }
   
  .acessorapido_field {
      background: #fff;
      border: 1px solid #e7e7e7
  }
   
  .acessorapido_field i {
      font-size: 30px;
      background: #e0333d;
      text-align: center;
      padding: 20px;
      color: #fff;
      width: 30px;
      margin: 0px 5px;
  }
   
  div#fld1 {
      margin: 10px 0px 10px 238px;
      padding: 30px;
  }
   
  img.acessRapido_img {
      width: 227px;
      height: 227px;
      position: absolute;
      margin: 10px 0px;
  }
   
  .dropdown-content a i {
      float: right;
  }
   
  .dropdown-content a i {
      float: right;
  }
   
  .dropdown-content a:hover {
      background: #e7e7e7;
  }
   
  .acesso_corpo {
      background: #232323;
      color: white;
      display: block;
      position: absolute;
      width: 435px;
      margin: -520px 0px 0px 243px;
      border: 1px solid #2b2b2b;
      padding: 20px;
      min-height: 477px;
      font-size: 11px;
      text-align: justify;
      line-height: 18px;
      overflow: auto;
      max-height: 335px;
  }
   
  .acesso_corpo a {
      font-weight: 700;
  }
   
  .acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
   
  table.acessoRapido_tabela td {
      padding: 20px;
      width: 180px;
      margin-top: 10px!important
      }
   
  table.acessoRapido_tabela a {
      display: block;
      line-height: 20px;
      padding: 9.5px 0px;
      font-size: 13px;
      font-weight: 300;
    border-bottom: 1px solid #E0E0E0!important;
  }
   
  table.acessoRapido_tabela a i {
      font-size: 10px;
  }
   
  table.acessoRapido_tabela {
      margin: auto;
      outline: 1px solid #e7e7e7;
  }
   
  table.acessoRapido_tabela td {
      vertical-align: baseline;
  }
   
  table.acessoRapido_tabela a:hover {
      font-weight: 900;
      border-color: #198fc3;
  }
           
  @font-face {
      font-family: 'chronos_serifstroked';
      src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  </style>    <script> 
    $(document).ready(function() {
      $('.dropdown-content a').click(function () {
        var getId = $(this).attr('id');
       
        $('.acesso_corpo').hide();
        $('.acesso_corpo#' + getId).show();
        $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
        $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
      });
    });
    </script>
    </div>
  </div>


Caso não funcione, tentaremos de outro método para ajudar você!

Atenciosamente,
Wusthy

É isso mesmo!
Está quase tudo otimo. Infelizmente notei um erro.
O ultimo Menu (no caso, referente a Moves & Habilidades) não tem scroll, ou seja, chega a uma linha e não surge mais nada, nem dá para descer dentro do menu =/

Desculpe estar a chatear com isto, mas são pequenos erros que não vale a pena "ignorar" :X

Olá, veja se é isto.

Código:


<meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Neucha" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chewy|Permanent+Marker|Shadows+Into+Light" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" /><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Oswald+Light" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed" type="text/css" rel="stylesheet" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Six+Caps" /><link href="//fonts.googleapis.com/css?family=Wire+One" type="text/css" rel="stylesheet" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Francois+One|Astloch" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee|Bungee+Inline|Lalezar|Nixie+One|Raleway+Dots|Suez+One" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&subset=latin-ext" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100,300,300,400,400,500,500,700,700,900,900" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" /><link crossorigin="anonymous" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />        <temp> <div style="" class="acessoRapido_template">
 
    <div class="acessoTapido_topo">
    Acesso rápido
    </div>
      <img src="https://i.imgur.com/Tbf2JJn.jpg?1" class="acessRapido_img" />   
    <div class="temp_acesso">
 
    <div class="dropdown">
 
    <div class="dropdown-content">
  <a style="background-color: #5a8dbb; color: #fff; font-weight: 500" id="acs01">
    <em class="fas fa-angle-double-right"></em> Classes Sub-Classes e etc...</a>
  <a id="acs03"><em class="fas fa-angle-double-right"></em> Regras</a>
  <a id="acs04"><em class="fas fa-angle-double-right"></em> Guias</a>
  <a id="acs05"><em class="fas fa-angle-double-right"></em> Sistema de Narração</a>
  <a id="acs06"><em class="fas fa-angle-double-right"></em> Bulba Forms</a>
  <a id="acs07"><em class="fas fa-angle-double-right"></em> PokeWiki</a>
  <a id="acs08"><em class="fas fa-angle-double-right"></em> Moves & Habilidades</a>
  </div>
  </div>
 
    <div style="overflow: visible;text-decoration: none;font-weight: bold;max-width: 100%;overflow: scroll" id="acs01" class="acesso_corpo">
                  <a href="https://bulbarpg.forumeiros.com/t8416-regras-sistema-de-classes-sub-classes-profissoes-e-faccoes#130023">Tudo sobre Classes</a>
                 
                  </div>
 
 
    <div style="display: none" id="acs03" class="acesso_corpo">
                 
                    Aba 2
                 
    </div>
 
    <div style="display: none" id="acs04" class="acesso_corpo">
                 
                    Aba 3
                 
    </div>
 
    <div style="display: none" id="acs05" class="acesso_corpo">
                 
                    Aba 4
                 
    </div>
 
    <div style="display: none" id="acs06" class="acesso_corpo">
                 
                    Aba 5
                 
    </div>
 
    <div style="display: none" id="acs07" class="acesso_corpo">
               
                    Aba 6
    </div>
         
            <div style="display: none; overflow: hidden;" id="acs08" class="acesso_corpo">
         
            Aba 7
         
            </div>
    <style>
    a {
        color: white;
    }
  ::-webkit-scrollbar-track {
      background-color: #F4F4F4;
  }
  ::-webkit-scrollbar {
      width: 6px;
      background: #F4F4F4;
  }
  ::-webkit-scrollbar-thumb {
      background: #dad7d7;
  }
 
  .dropdown {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    font-family: roboto;
    text-transform: uppercase;
  }
 
  .dropdown-content {
      background-color: #4a4949;
      font-family: Roboto;
      width: 207px;
      margin: 250px 0px 0px 0px;
      border: 10px solid #232323;
      outline: 1px solid #4e4e4e;
  }
 
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 11px;
    cursor: pointer;
    text-transform: initial;
  }
  </style>
    <style>
  .tooltip {
    position: relative;
    display: inline-block;
  }
 
  .tooltip .tooltiptext {
      visibility: hidden;
      background-color: #e0333d;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      padding: 7px 10px;
      position: absolute;
      z-index: 1;
      margin: -25px 0px 0px 10px;
      width: 55px;
      font-size: 10px;
  }
 
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </style> <style>
    temp {
    height: 600px;
    width: 720px;
    border: 0px;
    margin: auto;
    display: block;
    font-family: roboto;
  }
 
    temp a {
    text-decoration: none;
    }
 
  .acessoTapido_topo {
      text-align: center;
      font-size: 50px;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
      background-image: url(https://i.pinimg.com/originals/04/87/78/048778a11ff719a863c98349babb7997.jpg);
      padding: 20px 15px;
  font-family: 'chronos_serifstroked';
            letter-spacing: -5px;
  }
 
  .acessorapido_field {
      background: #fff;
      border: 1px solid #e7e7e7
  }
 
  .acessorapido_field i {
      font-size: 30px;
      background: #e0333d;
      text-align: center;
      padding: 20px;
      color: #fff;
      width: 30px;
      margin: 0px 5px;
  }
 
  div#fld1 {
      margin: 10px 0px 10px 238px;
      padding: 30px;
  }
 
  img.acessRapido_img {
      width: 227px;
      height: 227px;
      position: absolute;
      margin: 10px 0px;
  }
 
  .dropdown-content a i {
      float: right;
  }
 
  .dropdown-content a i {
      float: right;
  }
 
  .dropdown-content a:hover {
      background: #e7e7e7;
  }
 
  .acesso_corpo {
      background: #232323;
      color: white;
      display: block;
      position: absolute;
      width: 435px;
      margin: -520px 0px 0px 243px;
      border: 1px solid #2b2b2b;
      padding: 20px;
      min-height: 477px;
      font-size: 11px;
      text-align: justify;
      line-height: 18px;
      overflow: auto;
      max-height: 335px;
      overflow: auto !important;
  }
 
  .acesso_corpo a {
      font-weight: 700;
  }
 
  .acesso_corpo hr {background: linear-gradient(white, #e8e8e8, white);border: none;margin: 15px 0px;}
 
  table.acessoRapido_tabela td {
      padding: 20px;
      width: 180px;
      margin-top: 10px!important
      }
 
  table.acessoRapido_tabela a {
      display: block;
      line-height: 20px;
      padding: 9.5px 0px;
      font-size: 13px;
      font-weight: 300;
    border-bottom: 1px solid #E0E0E0!important;
  }
 
  table.acessoRapido_tabela a i {
      font-size: 10px;
  }
 
  table.acessoRapido_tabela {
      margin: auto;
      outline: 1px solid #e7e7e7;
  }
 
  table.acessoRapido_tabela td {
      vertical-align: baseline;
  }
 
  table.acessoRapido_tabela a:hover {
      font-weight: 900;
      border-color: #198fc3;
  }
         
  @font-face {
      font-family: 'chronos_serifstroked';
      src: url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff2') format('woff2'), url('https://files.jcink.net/uploads/ninelie/fonts/chronosserif_stroked_webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  </style>    <script>
    $(document).ready(function() {
      $('.dropdown-content a').click(function () {
        var getId = $(this).attr('id');
     
        $('.acesso_corpo').hide();
        $('.acesso_corpo#' + getId).show();
        $('.dropdown-content a').css({"background-color": "transparent", "color": "#FFF", "font-wight": "400"});
        $('.dropdown-content a#' + getId).css({"background-color": "#5a8dbb", "color": "#fff", "font-wight": "500"});
      });
    });
    </script>
    </div>
  </div>


É isso mesmo!
Agora sim está tudo completo

Obrigado aos dois. Um bom domingo para todos.
O forum agradece em peso esta ajuda. Vai ajudar imenso todos os membros ^^

Obrigado @Connor R. e @Wusthy

Tópico resolvido Movido para "Questões resolvidas".