Hi, I wanted to know how I can leave this dropdown menu open, which is done in bootrstrap 4.
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu{
position: absolute;
transform: translate3d(0px, 41px, 0px);
top: -43px!important;
left: 252px!important;
will-change: transform;
background: #868686;
border-radius: initial;
color: #fff;
padding-top: 0;
padding-bottom: 0;
}
.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas{
position: absolute;
transform: translate3d(0px, 41px, 0px);
top: -42px!important;
left: 218px!important;
will-change: transform;
background: #868686;
border-radius: initial;
color: #fff;
font-size: 14px;
padding-top: 0;
padding-bottom: 0;
}
.categoria-prod #collapsingNavbar .dropdown-item.active, .dropdown-item:active{
background-color: #f5131f;
color: #fff!important
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a{
color: #fff;
padding-left: 14px;
padding-right: 14px;
padding-top: 9px;
padding-bottom: 9px;
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover{
color: #000;
background: #fff;
}
.categoria-prod .bg-prod{
background-color: #f5131f;
}
.categoria-prod .bg-prod .navbar-brand{
font-size: 17px;
}
.navbar-dark .navbar-toggler{
color: #fff;
border-color:transparent!important;
outline: none
}
.navbar-dark .navbar-toggler:hover{
opacity: 0.7
}
.navbar-toggler{
padding: 3px 10px!important;
font-size: 26px!important;
color: #fff;
outline: none
}
.categoria-prod .btn-category{
background-color: #ededed;
border-radius: initial;
font-size: 15px;
color: #565656;
padding: 0.5rem 0.75rem;
border-color: #bebebe;
}
.dropdown-toggle::after {
display: none;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="container categoria-prod pt-3 pt-lg-0">
<div class="row">
<div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
<div class=" navbar-dark bg-prod">
<div class="p-2 px-lg-3 py-lg-3">
<a class="navbar-brand" href="#">Productos</a>
<button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<i class="fas fa-list-ul"></i>
</button>
</div>
<div class="navbar-collapse collapse px-3 py-2" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hierro
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chapas
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chapa Acanalada
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu hijas-de-hijas" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="single.html">Chapas prepintadas </a>
<a class="dropdown-item" href="#">Chapas prepintadas </a>
<a class="dropdown-item" href="#">Chapas prepintadas </a>
</div>
<a class="dropdown-item" href="#">Chapa Acanalada dasdda </a>
<a class="dropdown-item" href="#">Chapa Acanalada dasdsad </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Perfiles
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tubos y Caños
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Metal desplegado y Rejillas
<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mallas metálicas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aislaciones y membranas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Clavos y tornillos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Alambres y tejidos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Todo para herrería</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Soldadoras</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Herramientas eléctricas </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>