<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <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://code.jquery.com/jquery-3.3.1.min.js"></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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="container"> <div class="row" style="margin-top: 100px;"> <div class="col-4"></div> <div class="col-4"> <p class="text-right"> <i class="fab fa-buromobelexperte fa-2x admi" id="admi" title="Abrir Módulos"></i> <div class="caixa-maior" id="cxmais" style="display: none;"> <div class="row" style="padding: 10px;"> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="fas fa-database icon-caixa"></i><br> <span class="span-caixa">Item 01</span> </p></a> </div> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="fas fa-download icon-caixa"></i><br> <span class="span-caixa">Item 02</span> </p></a> </div> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="far fa-calendar-plus icon-caixa"></i><br> <span class="span-caixa">Item 03</span> </p></a> </div> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="far fa-hourglass icon-caixa"></i><br> <span class="span-caixa">Item 04</span> </p></a> </div> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="fas fa-dolly icon-caixa"></i><br> <span class="span-caixa">Item 05</span> </p></a> </div> <div class="col-lg-4 col-md-4 caixa-menor"> <a href="#"><p class="text-center"> <i class="fas fa-clipboard-list icon-caixa"></i><br> <span class="span-caixa">Item 06</span> </p></a> </div> </div> </div> </p> </div> <div class="col-4"> </div> </div> </div>

.caixa-maior{ position: absolute;right: 0;border: 1px solid #919191;border-radius: 10px;padding: 20px;background-color: #fff;} .caixa-maior:after{ content: '';display: block;position: absolute;left: 340px;bottom: 100%;width: 0;height: 0;border: 9px solid transparent;border-bottom-color: white;} .caixa-maior:before{ content: '';display: block;position: absolute;left: 339px;bottom: 100%;width: 0;height: 0;border: 10px solid transparent;border-bottom-color: #919191;} .icon-caixa{ font-size: 30px;color: #666;} .span-caixa{ text-transform: uppercase;font-size: 10px;color: #666;font-family: serif;} .caixa-menor{ border: 1px solid #fff;padding: 15px 10px 0px 10px;transition: .3s;border-radius: 5px;} .caixa-menor:hover{ border: 1px solid #919191;} .caixa-menor a{ text-decoration: none;} .caixa-menor a:hover{ text-decoration: none;} .admi{ cursor: pointer;}

$(document).ready(function(){ $('#admi').click(function(){ if($('#cxmais').css('display') == 'none'){ $('#cxmais').fadeIn('fast'); }else{ $('#cxmais').fadeOut('fast'); } }); });