-1

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-->

inserir a descrição da imagem aqui

0

1 Resposta 1

0

Consegui solucionar o problema. Quando o li é clicado, adiciona a class=open. No CSS aumentei o margin-bottom para 310px nesta classe.

Problema resolvido :D. Espero que futuramente isto ajude alguém.

3
  • 2
    Olá fabricio, não precisa fechar a pergunta (lembrando que você mesmo pode fazer isso). Basta postar como resolveu e marcar sua própria pergunta como certa
    – Randrade
    Commented 28/02/2016 às 0:59
  • 1
    Não somos um fórum, não é necessário fechar a pergunta, somos um Q&A, quando passar o período de "carência" da pergunta você poderá marcar a sua própria resposta como correta.
    – Syzoth
    Commented 28/02/2016 às 4:06
  • 1
    Guilherme e Randrade, desculpem pelo vacilo. Ainda não tinha certeza se tinham que fechar a pergunta. Obrigado pelo esclarecimento. Commented 29/02/2016 às 1:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .