<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 second-level-menu"> <div class="row"> <div class="col-xs-12"> <ul class="nav tag-switch" role="tablist"> <li role="presentation" class="active level1"><a href="#second-level-menu1" role="tab" data-toggle="tab">AA</a></li> <li role="presentation" class="level1"><a href="#second-level-menu2" role="tab" data-toggle="tab">BB</a></li> <li role="presentation" class="level1"><a href="#second-level-menu3" role="tab" data-toggle="tab">CC</a></li> <li class="pull-right tab-content level2"> <ul class="list-inline tab-pane active" role="tabpanel" id="second-level-menu1"> <li role="presentation" class="active"> <a href="#second-level-menu1-content1" role="tab" data-toggle="tab">AA_1</a> </li> <li role="presentation"> <a href="#second-level-menu1-content2" role="tab" data-toggle="tab">AA_2</a> </li> <li role="presentation"> <a href="#second-level-menu1-content3" role="tab" data-toggle="tab">AA_3</a> </li> </ul> <ul class="list-inline tab-pane" role="tabpanel" id="second-level-menu2"> <li role="presentation"> <a href="#second-level-menu2-content1" role="tab" data-toggle="tab">BB_1</a> </li> <li role="presentation"> <a href="#second-level-menu2-content2" role="tab" data-toggle="tab">BB_2</a> </li> <li role="presentation"> <a href="#second-level-menu2-content3" role="tab" data-toggle="tab">BB_3</a> </li> </ul> <ul class="list-inline tab-pane" role="tabpanel" id="second-level-menu3"> <li role="presentation"> <a href="#second-level-menu3-content1" role="tab" data-toggle="tab">cc_1</a> </li> <li role="presentation"> <a href="#second-level-menu3-content2" role="tab" data-toggle="tab">cc_2</a> </li> <li role="presentation"> <a href="#second-level-menu3-content3" role="tab" data-toggle="tab">cc_3</a> </li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="second-level-menu1-content1"> 1 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu1-content2"> 2 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu1-content3"> 3 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu2-content1"> 2 1 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu2-content2"> 2 2 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu2-content3"> 2 3 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu3-content1"> 3 1 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu3-content2"> 3 2 </div> <div role="tabpanel" class="tab-pane" id="second-level-menu3-content3"> 3 3 </div> </div> </div> </div> </div> <script type="text/javascript"> $('.tag-switch a').mouseover(function () { $(this).click(); }) $('.second-level-menu .level1 a').mouseover(function () { var contentid = $(this).attr("href"); var contentfirst = contentid + " li:first a"; $(contentfirst).click(); }).mouseout(function () { var contentid = $(this).attr("href"); var contentfirst = contentid + " li:first"; $(".level2 ul li").removeClass("active"); $(contentfirst).addClass("active"); }) </script>

a { color: #000000; } a:hover { text-decoration: none; color: #000000; } .tag-switch li { float: left;text-align:center} .tag-switch { border-bottom: 3px solid #FF0000; } .tag-switch li a { line-height: 25px; width: 80px;font-size: 20px; } .tag-switch .active a { background-color: #FF0000;color:#fff } .tag-switch li a:hover { background: #FF0000; } .tag-switch li:last-child ul { margin-top:10px} .tag-switch li:last-child a{font-size:16px;padding:2px 5px;background:none;color:#000000} .tag-switch li:last-child ul .active a { background:#FF0000;color:#fff}