Estou fazendo uma página onde tem um menu dropdown e cada item do menu altera o conteúdo da div à esquerda. Meu problema é que quando clicar neste menu e ele mostrar seu submenu, ele deve jogar a "Calibração de Equipamentos" e "Segurança do Trabalho" para baixo, em vez disso ele fica por cima. Já tentei alterar position e outras coisas, mas nada funcionou. O trecho do código é este:
.menu{
top: 135px;
left: 35px;
li {
background-color: rgba(0, 0, 0, 0.70);
margin-right: -10px;
&:hover{
background-color: rgba(32, 44, 98, 0.81);
}
a {
width: 360px;
height: 55px;
color: #FFF ;
text-decoration: none;
margin-bottom: 15px;
text-align: right;
border-radius: 0;
font-family: "Roboto Condensed", sans-serif;
font-size: 25px;
padding-right: 60px;
}
.btn_monit{
background: url("../img/btn_monitoramento.png") no-repeat right;
}
.btn_calibracao{
background: url("../img/btn_calibracao.png") no-repeat right;
}
.btn_seguranca{
background: url("../img/btn_seguranca.png") no-repeat right;
}
}
}//Fim menu
<!--Menu-->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 menu">
<ul class="nav nav-pills nav-stacked">
<li><a id="dLabel" data-target="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="btn_monit ">Monitoramento Ambiental</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li><a href="#">Emissão</a>
</li>
<li><a href="#">Análise</a>
</li>
<li><a href="#">Vibração</a>
</li>
<li><a href="#">Ruído</a>
</li>
</ul>
</li>
<li><a data-toggle="tab" class="btn_calibracao" href="#calibracao">Calibração de Equipamentos</a>
</li>
<li><a data-toggle="tab" class="btn_seguranca" href="#seguranca">Segurança do Trabalho</a>
</li>
</ul>
</div>
<!--Fim Menu-->