Dropdown button does not work inside a div

Question

I created a button dropdown that worked perfectly. But I had to put it between a div and then it stopped working. Which could be?

<div class="dropdown">
  <div class="col-md-4">
    <button class="button button-business dropdown-toggle" type="button" data-toggle="dropdown">Produtos <span class="caret"></span></button>
  </div>
  <ul class="dropdown-menu dropdown-menu-large row">
    <li class="col-sm-3 hidden-xs">
      <ul>
        <li class="dropdown-header">Novos Produtos</li>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item active">
              <a href="#"><img class = "destaques" src="img/fiat_vlk340.jpg" class="img-responsive" alt="product 1"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
            <div class="item">
              <a href="#"><img class = "destaques" src="img/BRW_680_cromada.jpg" class="img-responsive" alt="product 2"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
            <div class="item">
              <a href="rodas.html"><img class = "destaques" src="img/antifurto.jpg" class="img-responsive" alt="product 3"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
          </div>
          <!-- End Carousel Inner -->
        </div>
        <!-- /.carousel -->
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Acessórios</li>
        <li><a href="#">Anéis</a></li>
        <li><a href="#">Capa e Tampa</a></li>
        <li><a href="#">Centro de roda </a></li>
        <li><a href="#">Emblemas </a></li>
        <li><a href="#">Subcalotas </a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Parafusos</li>
        <li><a href="#">Parafusos</a></li>
        <li><a href="#">Porcas</a></li>
        <li><a href="#">Prisioneiros</a></li>
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Rodas</li>
        <li><a href="#">Aro 13</a></li>
        <li><a href="#">Aro 14</a></li>
        <li><a href="#">Aro 15</a></li>
        <li><a href="#">Aro 16</a></li>
        <li><a href="#">Aro 17</a></li>
        <li><a href="#">Aro 18</a></li>
        <li><a href="#">Aro 19</a></li>
        <li><a href="#">Aro 20</a></li>
        <li class="divider"></li>
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Marcas</li>
        <li><a href="#">Fiat</a></li>
        <li><a href="#">Ford</a></li>
        <li><a href="#">GM</a></li>
        <li><a href="#">Volkwagen </a></li>
        <li><a href="#">Toyota </a></li>
        <li><a href="#">Diversas </a></li>
      </ul>
    </li>
  </ul>

  </li>
  </ul>
</div>
<!--Fim DropDown-->

Answer 1

Man the problem that’s occurring there is that your button is inside a div and the content of dropdown out of the div.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <div class="col-md-4">
    <button class="button button-business dropdown-toggle" type="button" data-toggle="dropdown">Produtos <span class="caret"></span></button>
  
  <ul class="dropdown-menu dropdown-menu-large row">
    <li class="col-sm-3 hidden-xs">
      <ul>
        <li class="dropdown-header">Novos Produtos</li>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item active">
              <a href="#"><img class = "destaques" src="img/fiat_vlk340.jpg" class="img-responsive" alt="product 1"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
            <div class="item">
              <a href="#"><img class = "destaques" src="img/BRW_680_cromada.jpg" class="img-responsive" alt="product 2"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
            <div class="item">
              <a href="rodas.html"><img class = "destaques" src="img/antifurto.jpg" class="img-responsive" alt="product 3"></a>
              <a href="rodas.html"><button class="btn btn-danger" type="button"><span class="fa fa-shopping-basket"></span></span> Veja mais</button></a>
            </div>
            <!-- End Item -->
          </div>
          <!-- End Carousel Inner -->
        </div>
        <!-- /.carousel -->
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Acessórios</li>
        <li><a href="#">Anéis</a></li>
        <li><a href="#">Capa e Tampa</a></li>
        <li><a href="#">Centro de roda </a></li>
        <li><a href="#">Emblemas </a></li>
        <li><a href="#">Subcalotas </a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Parafusos</li>
        <li><a href="#">Parafusos</a></li>
        <li><a href="#">Porcas</a></li>
        <li><a href="#">Prisioneiros</a></li>
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Rodas</li>
        <li><a href="#">Aro 13</a></li>
        <li><a href="#">Aro 14</a></li>
        <li><a href="#">Aro 15</a></li>
        <li><a href="#">Aro 16</a></li>
        <li><a href="#">Aro 17</a></li>
        <li><a href="#">Aro 18</a></li>
        <li><a href="#">Aro 19</a></li>
        <li><a href="#">Aro 20</a></li>
        <li class="divider"></li>
      </ul>
    </li>
    <li class="col-sm-3 col-xs-4">
      <ul>
        <li class="dropdown-header">Marcas</li>
        <li><a href="#">Fiat</a></li>
        <li><a href="#">Ford</a></li>
        <li><a href="#">GM</a></li>
        <li><a href="#">Volkwagen </a></li>
        <li><a href="#">Toyota </a></li>
        <li><a href="#">Diversas </a></li>
      </ul>
    </li>
  </ul>

  </li>
  </ul>
 </div>
</div>
<!--Fim DropDown-->