Vertical dropdown menu - Bootstrap

Asked

Viewed 790 times

0

I’m making a page where there’s a dropdown menu and each menu item changes the contents of the left div. My problem is that when you click on this menu and it shows your submenu, it should play "Equipment Calibration" and "Work Safety" down, instead it sits on top. I’ve tried changing position and other things, 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-->

inserir a descrição da imagem aqui

javascript html css twitter-bootstrap dropdown

1 answer

0

I was able to solve the problem. When the li is clicked, adds to class=open. In CSS I increased the margin-bottom for 310px in this class.

Problem solved :D. I hope that in the future this will help someone.

  • 1

    Hello Opening, no need to close the question (remembering that you can do it yourself). Just post how you resolved and mark your own question as sure

  • We are not a forum, it is not necessary to close the question, we are a Q&A, when you pass the period of "lack" of the question you can mark your own answer as correct.

  • Guilherme and Randrade, sorry for the hesitation. I was still not sure if you had to close the question. Thanks for the clarification.

Browser other questions tagged javascript html css twitter-bootstrap dropdown

You are not signed in. Login or sign up in order to post.