<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="row"> <div class="col-md-6"> <!-- Nav tabs --><div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Client Profiles <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#AddClient">Add Client</a></li> <li><a href="#ViewClient">View Client</a></li> <li><a href="#UpdateClient">Update Client</a></li> <li><a href="#DeleteClient">Delete Client</a></li> </ul> </li> </ul> <!-- Tab panes --> </div> </div> </div> </div>

.nav-tab { border-bottom: 2px solid #DDD; } .dropdown:hover .dropdown-menu { display: block; margin-top: 0; background-color:#000; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-tabs > li > a { border: none; color: #666; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; } .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; } .tab-pane { padding: 15px 0; } .tab-content { padding: 20px; } .card { background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } body { background: #EDECEC; padding: 50px; }