I'm making a page where it has a dropdown menu and each menu item changes the contents of the div on the left. My problem is that when I click on this menu and it shows its submenu, it should throw the "Equipment Calibration" and "Job Security" down, instead it overlaps. I've already tried to change position and stuff, but nothing worked. The code snippet is this:
.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--> 