<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <!-- Include in Header (Ignore if already included) --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Include in body --> <div id="sidemenu"> <div class="panel"> <a href="#"><span> Lorem Ipsum </span></a> <a href="#collaboration" data-toggle="collapse" aria-expanded="false" data-parent="#sidemenu"><span>Lorem Ipsum</span></a> <a href="#holidays" data-toggle="collapse" aria-expanded="false" data-parent="#sidemenu"> <span>Lorem Ipsum</span> </a> <ul class="collapse list-unstyled subMenu" id="collaboration"> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> <ul class="collapse list-unstyled subMenu" id="holidays"> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> <a href="#hr" data-toggle="collapse" aria-expanded="false" data-parent="#sidemenu"><span>Lorem Ipsum</span></a> <a href="#issNoc" data-toggle="collapse" aria-expanded="false" data-parent="#sidemenu"><span>Lorem Ipsum</span></a> <a href="#salesCso" data-toggle="collapse" aria-expanded="false" data-parent="#sidemenu"><span>Lorem Ipsum</span></a> <ul class="collapse list-unstyled subMenu" id="hr"> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> <ul class="collapse list-unstyled subMenu" id="issNoc"> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> <ul class="collapse list-unstyled subMenu" id="salesCso"> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#" target="_blank">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> </div> </div>

#sidemenu .panel{ background: #226a94; width:300px; margin:auto; margin-bottom: 0px !important;} #sidemenu .panel a{ padding: 5px; font-size: 0.9em; display:inline-flex; height: 82px; background: #39799f; width:32.2%; margin-top: 4px; vertical-align: top; text-align: center; align-items: stretch; color:#ffffff; text-decoration:none; } #sidemenu a span { overflow: hidden; display: flex; align-items: center; margin: auto; } #sidemenu a:hover {background: #5692b5;} #sidemenu .subMenu{margin-bottom: 0px;} #sidemenu .subMenu li a{ font-size: 0.9em !important; padding-left: 10px !important; background: #5692b5; display: block; width: 100%; line-height: 20px; margin-top: 0px; height: inherit; text-align: left; } #sidemenu .subMenu a:hover { color: #ffffff; background: #39799f; } #sidemenu .subMenu li a:before { content: '\0203A '; font-size: 1.5em !important; padding-right:2px; } #sidemenu a.active, #sidemenu a[aria-expanded="true"] { color: #fff; background: #5692b5; height: 86px; } #sidemenu a[data-toggle="collapse"] { position: relative; } #sidemenu a[aria-expanded="false"]::before, #sidemenu a[aria-expanded="true"]::before { content: '\e259'; display: block; position: absolute; bottom: 2px; font-family: 'Glyphicons Halflings'; font-size: 0.6em; left: 36px; } #sidemenu a[aria-expanded="true"]::before { content: '\e260'; }