<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="page-header"> <h1>Deaspo Studios Inc.^{<small>TM</small></smal>}</sup>&nbsp-&nbspInstat-Web<span class="pull-right label label-default"></span></h1> </div> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li><a href="#file" data-toggle="tab"><i class="glyphicon glyphicon-file"></i>&nbspFile</a></li> <li class="active"><a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-home"></i>&nbspHome</a></li> <li><a href="#insert" data-toggle="tab">Insert</a></li> <li><a href="#pagelayout" data-toggle="tab">Page Layout</a></li> <li><a href="#model" data-toggle="tab">Model</a></li> <li><a href="#tools" data-toggle="tab">Tools</a></li> <li><a href="#window" data-toggle="tab">Window</a></li> <li><a href="#help" data-toggle="tab">Help</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>&nbspMy Account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-chevron-right"></i>&nbspMy Profile</a></li> <li><a href="#settings" data-toggle="tab"><i class="glyphicon glyphicon-chevron-right"></i>&nbspSettings</a></li> <li><a href="#logout" data-toggle="tab"><i class="glyphicon glyphicon-chevron-right"></i>&nbspLogout</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <div class="row form-group"> <div class="col-sm-3"> <ul> <li class="dropdown-header">Clipboard</li> <li><a href="#">Paste</a></li> <li><a href="#">Cut</a></li> <li><a href="#">Copy</a></li> <li><a href="#">Undo</a></li> <li><a href="#">Redo</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li class="dropdown-header">Fonts</li> <li><a href="#">Font Style</a></li> <li><a href="#">Font Weight <button class="btn btn-primary" type="button">B</button> <button href="#" class="btn btn-default" type="button"> I</button> <button href="#" class="btn btn-success" type="button"> U</button></a></li> <li><a href="#">Color</a></li> <li><a href="#">Background</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li class="dropdown-header">Editing</li> <li><a href="#">AutoSum</a></li> <li><a href="#">Fill</a></li> <li><a href="#">Sort & Filter</a></li> <li><a href="#">Find & Select</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li class="dropdown-header">Numbers</li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Currency <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Fill</a></li> <li><a href="#">Sort & Filter</a></li> <li><a href="#">Find & Select</a></li> </ul> </li> <li><a href="#">Percentage Styler</a></li> <li><a href="#">Decimal   <button class="btn btn-primary" type="button">Add</button> <button href="#" class="btn btn-default" type="button"> Remove</button> </a></li> </ul> </div> </div> </div> <div class="tab-pane fade" id="insert"> <div class="row form-group"> <div class="col-sm-3"> <ul> <li><a href="#">Insert Row Above</a></li> <li><a href="#">Insert Row Below</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li><a href="#">Insert Column on the Left</a></li> <li><a href="#">Insert Column on the Right</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li><a href="#">Remove Row</a></li> <li><a href="#">Remove Column</a></li> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="pagelayout"> <div class="row form-group"> <div class="col-sm-3"> <ul> <li><a href="#">Left</a></li> <li><a href="#">Right</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li><a href="#">Center</a></li> <li><a href="#">Justify</a></li> </ul> </div> <div class="col-sm-3"> <ul> <li><a href="#">Top</a></li> <li><a href="#">Middle</a></li> <li><a href="#">Bottom</a></li> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="model"> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="tools"> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="window"> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="help"> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="profile"> <p>Profile section</p> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="settings"> <p>Settings Section</p> <div class="row form-group"> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> <div class="col-sm-3"> <ul> </ul> </div> </div> </div> <div class="tab-pane fade" id="logout"> <p>Logout section</p> <div class="row form-group"> </div> </div> </div> </div> </div> </div> </div> </div> <br/>

.dropdown-header { font-size: 15px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } ul { padding: 0; margin: 0; } ul > li { list-style: none; } ul > li > a { display: block; color: #222; padding: 3px 5px; } ul > li > a:hover, ul > li > a:focus { text-decoration: none; } ul>li>a:hover,ul>li>a:focus { color: #444; background:#eeeeee; border-bottom:3px solid #ff0000; }