<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation"> <div class="side-menu-container"> <ul class="nav"> <li class="nav-title"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Div Menu Home</a></li> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#about"> Dropdown <span class="caret"></span> </a> <div id="about" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#">Drop item</a></li> <li><a href="#">Drop item</a></li> </ul> </div> </div> </li> <li class="panel panel-default" id="dropdown"> <a href="#certs"> Menu Item </a> </li> <li class="panel panel-default" id="dropdown"> <a href="#certs"> Menu Item </a> </li> <li class="panel panel-default" id="dropdown"> <a href="#certs"> Menu Item </a> </li> </ul> </div> </nav> </div> </div>

.side-menu { width: 100%; height: auto; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; } .side-menu .navbar { border: none; } .side-menu .navbar-header { width: 100%; background-color:#0061aa; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav .active a { background-color: transparent; margin-right: -1px; border-right: 3px solid #0061aa; } .side-menu .navbar-nav li { display: block; width: 100%; background-color:#dedede; border-bottom: 1px solid #e7e7e7; border-left:4px solid #fff; } .side-menu .navbar-nav li a { padding: 10px; color:#0061aa; font-size:.9em; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #c3c3c3; } .side-menu #dropdown .panel-body { padding: 0; background-color: #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #fff; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .nav-title { background-color:#0061aa; } .nav-title a{ color:#fff; font-weight:bold; } .nav-title a:hover{ background-color:#0061aa; color:#0061aa; font-weight:bold; text-decoration:underline; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; border-bottom: 1px solid #e7e7e7; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } }