Bootstrap tabs

by M Greene

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br>
<div class="something">
  <ul class="nav nav-tabs">
    <li class="tab active"><a href="#">Home</a></li>
    <li class="tab dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="subtab "><a href="#">Submenu 1-1</a></li>
        <li class="subtab "><a href="#">Submenu 1-2</a></li>
        <li class="subtab "><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    <li class="tab "><a href="#">Menu 2</a></li>
    <li class="tab "><a href="#">Menu 3</a></li>
  </ul>
</div>

CSS

.something .nav li.tab
,.something .nav-tabs li.tab {
  padding: 0;
  margin: 0px 1px -1px 1px;
}

.something .nav li.tab a
,.something .nav-tabs li.tab a {
  margin: 0;
  padding: 3px 10px;
  background: #EFEFEF;
  color: #06C;
  font-weight: bold;
  border: 1px solid lightgray;
  border-bottom: none;
}

.something .nav li.tab a:hover
,.something .nav-tabs li.tab a:hover {
  background: transparent;
  color: #333;
}

.something .nav li.tab.active a
,.something .nav-tabs li.tab.active a {
  background: white;
  font-weight: bold;
  color: #333;
}

.something .nav-tabs li.tab.dropdown ul.dropdown-menu {
  margin: 0;
  padding: 0;
  width: 100%;
}

.something .nav-tabs li.tab.dropdown ul.dropdown-menu li.subtab a {
  background: transparent;
  color: #333;
  border: none;
  margin: 0;
}