I have a tab menu that I need to put an arrow at the bottom of the button when it is active. Here is the image as it is:
Ithastolooklikethis:
Hereisthecodeforthis"menu":
<div class="cq-tabs " style="width: 100%;" data-tabsstyle="style1" data-titlebg="#cf111d" data-titlecolor="#ffffff" data-titlehoverbg="#fbce07" data-titlehovercolor="#000000" data-rotatetabs="0">
<ul class="cq-tabmenu style1 active" style="background-color: #cf111d; border-bottom-color: #fbce07;">
<li class="current" style="background-color: #cf111d;"><a style="color: #000000; background: #fbce07;" href="#"><i class="icon-icones-site-01-01"></i><span style="font-size: 11px;">Escolha do trabalhoa ser escolhido</span></a></li>
<li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-02-01"></i><span style="font-size: 11px;">Inscrição</span></a></li>
<li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-03-01"></i><span style="font-size: 11px;">Avaliação</span></a></li>
<li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-04-01"></i><span style="font-size: 11px;">Pré-seleção</span></a></li>
<li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-05-01"></i><span style="font-size: 11px;">Avaliação Coletiva</span></a></li>
<li style="background-color: #cf111d;"><a style="color: #ffffff;" href="#"><i class="icon-icones-site-06-01"></i><span style="font-size: 11px;">Premiação</span></a></li>
</ul>
<div class="cq-tabcontent style1" style="background: #cf111d;">
<div class="cq-tabitem" style="color: #ffffff;"><em>O professor escolhe algum projeto ou uma sequência de atividades que desenvolveu no ano letivo de 2016 e/ou 2017 para participar do Prêmio.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>O professor, então, lê o regulamento e faz a inscrição aqui no site do Prêmio, preenchendo todos os campos. O relato do projeto, preenchido de acordo com o modelo fornecido no site, deve ser anexado à inscrição.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>O avaliador de cada categoria analisa o relato com muita atenção. Se o avaliador tiver alguma dúvida sobre o projeto, poderá entrar em contato com o professor. Nesta situação, podem ser solicitados registros das atividades e das produções feitas pelos alunos</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>Os avaliadores fazem uma pré-seleção de projetos que têm o potencial de serem vencedores. Após analisar os registros e produções, caso seja necessário, o avaliador entra em contato novamente com os professores, perguntando detalhes do trabalho.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>Os trabalhos pré-selecionados são avaliados por uma comissão e os 3 vencedores de cada categoria são escolhidos e premiados!</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>A organização do Prêmio liga para dar a notícia aos vencedores, que são, então, convidados para a cerimônia de premiação e participarão da viagem educativa à Londres na Inglaterra.</em></div>
</div>
</div>
Follow his CSS:
.cq-tabs {
clear: both;
position: relative;
width: 100%;
padding: 0;
margin: 0 auto;
}
.cq-tabs .cq-tabcontent{
margin-top: -1px
}
.cq-tabitem {
color: #666;
position: relative;
display: none;
margin: 0;
padding: 12px 15px;
/*padding: 30px 0;*/
}
.cq-tabitem p {
margin: 4px 0 10px 0;
}
.cq-tabitem:first-child {
display: block;
}
.cq-tabs li.current a {
color: #fbce07;
background: #00ACED;
}
.cq-tabmenu.style1 {
/*display: table;*/
display: table;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #eff0f2;
border-bottom: none;
width: 100%;
}
.cq-tabmenu.style1 i.fa{
margin-top: 12px;
margin-right: 0px;
font-size: 20px;
}
.cq-tabmenu.style1 li {
display: inline-block;
float: left;
list-style: none;
line-height: 53px;
overflow: hidden;
margin: 1px;
padding: 0;
border: 1px solid #fff;
/*position: relative;*/
}
.cq-tabmenu.style1 a {
/*background-color: #eff0f2;*/
font-size: 14px;
color: #888;
font-weight: 500;
float: left;
display: block;
/*letter-spacing: 0;*/
outline: none;
padding-top: 15px;
padding-right: 13px;
padding-bottom: 15px;
padding-left: 13px;
text-decoration: none;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;*/
/*border-bottom: 2px solid #87d3b7;*/
}
I found this explanation on the web, but I could not do it:
/** Seta para BAIXO **/
.seta-baixo:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
}