<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 ----------> <ul class="qb-left-menu-inner"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">Team</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Works <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">Dropdown heading</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="https://twitter.com/maridlcrmn">Follow me</a> </li> </ul>

/*.qb-left-menu-inner { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; }*/ .qb-left-menu-inner li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .qb-left-menu-inner li:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .qb-left-menu-inner li:first-child a { color: #fff; background-color: #1a1a1a; } .qb-left-menu-inner li:nth-child(2):before { background-color: #ec1b5a; } .qb-left-menu-inner li:nth-child(3):before { background-color: #79aefe; } .qb-left-menu-inner li:nth-child(4):before { background-color: #314190; } .qb-left-menu-inner li:nth-child(5):before { background-color: #279636; } .qb-left-menu-inner li:nth-child(6):before { background-color: #7d5d81; } .qb-left-menu-inner li:nth-child(7):before { background-color: #ead24c; } .qb-left-menu-inner li:nth-child(8):before { background-color: #2d2366; } .qb-left-menu-inner li:nth-child(9):before { background-color: #35acdf; } .qb-left-menu-inner li:hover:before, .qb-left-menu-inner li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .qb-left-menu-inner li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .qb-left-menu-inner li a:hover, .qb-left-menu-inner li a:active, .qb-left-menu-inner li a:focus, .qb-left-menu-inner li.open a:hover, .qb-left-menu-inner li.open a:active, .qb-left-menu-inner li.open a:focus{ color: #fff; text-decoration: none; background-color: transparent; } .qb-left-menu-inner .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; }