Bootstrap Collapsible Tabs

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div class="row">
    <div class="span4">
        <div class="side-nav-container affix-top">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a></li>
                <div id="Tab1" class="collapse in">
                    <ul class="nav nav-tabs nav-stacked" id="subnav">
                        <li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
                        <li><a id="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li>
                        <li><a id="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li>
                    </ul>
                </div>
                <li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
                <li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
                <li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
            </ul>
        </div>
    </div>
    <div class="span8">
        <div class="tab-content">
            <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
            <div class="tab-pane fade" id="Subtab2">Content 1b</div>
            <div class="tab-pane fade" id="Subtab3">Content 1c</div>
            <div class="tab-pane fade" id="Tab2">Content 2</div>
            <div class="tab-pane fade" id="Tab3">Content 3</div>
            <div class="tab-pane fade" id="Tab4">Content 4</div>
        </div>
    </div>
</div>

CSS

.nav-tabs > li {
	margin: 0 0 1px 0;
}
.nav-tabs > li > a {
    height: 36px;
    padding: 0 17px;
    line-height: 36px;
    color: rgb(64, 64, 64);
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.nav-tabs.nav-stacked > li > a {
    border-radius: 2px;
}
.nav-tabs.nav-stacked > li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.nav-tabs.nav-stacked > li:first-child > a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.nav-tabs.nav-stacked > li > a:hover, .nav-tabs.nav-stacked > li > a:focus {
    border: none;
    outline: none;
    -moz-outline-style: none;
}
.nav-tabs.nav-stacked > li > a:hover {
    background: rgb(181, 181, 181);
    color: rgb(242, 242, 242);
}
.nav-tabs.nav-stacked > li > a {
    border: none;
}
.nav-tabs.nav-stacked > li.active > a, .nav-tabs.nav-stacked > li.active > a:hover {
    color: rgb(242, 242, 242);
    background: rgb(50, 150, 50);
}
#subnav {
    width: 200px;
    float: right;
    margin: 0 0 0;
}
#subnavtab {
	border-radius: 2px;
}