Something

Creating primary and secondary tab html/css to update the look and feel of our current 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>
<div class="primary">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#">Submenu 1-1</a></li>
        <li class=""><a href="#">Submenu 1-2</a></li>
        <li class=""><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    <li class=""><a href="#">Menu 2</a></li>
    <li class=""><a href="#">Menu 3</a></li>
  </ul>
</div>
<br>
<div class="secondary">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="active"><a href="#">Submenu 1-1</a></li>
        <li class=""><a href="#">Submenu 1-2</a></li>
        <li class=""><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    <li class=""><a href="#">Menu 2</a></li>
    <li class=""><a href="#">Menu 3</a></li>
  </ul>
</div>

CSS

.nav-tabs li {
  padding: 0;
  margin: 0px 3px -1px 0px;
}

.nav-tabs li a {
  margin: 0;
  padding: 3px 10px;
  font-weight: bold;
  font-size: .9em;
  border: 1px solid #AAA;
  border-bottom: none;
  border-radius: 0;
}
.nav li.dropdown ul.dropdown-menu
,.nav-tabs li.dropdown ul.dropdown-menu {
  width: 100%;
  padding: 0;
}

.nav-tabs li.dropdown ul.dropdown-menu li {
  margin: 0;
}

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


.primary .nav li:not(.active) a {
  background: #D9E7FF;
  color: #333;
}

.primary .nav-tabs li.dropdown ul.dropdown-menu li.active a {
  background: #D9E7FF;
  color: #333;
}

.secondary .nav-tabs li.dropdown ul.dropdown-menu li.active a {
  background: #D9E7FF;
}

.primary .nav li:not(.active) a:hover {
  background: #FFF7CD;
  border-color: #666;
  border-bottm: 1px;
}

.secondary .nav li:not(.active) a {
  background: #EFEFEF;
  color: #06C;
  border-color: lightgray;
}

.secondary .nav li:not(.active) a:hover {
  background: #D9E7FF;
  border-color: #06C;
  border-color: lightgray;
}

/* .primary .nav li.tab
,.primary .nav-tabs li.tab
,.secondary .nav li.tab
,.secondary .nav-tabs li.tab {
  padding: 0;
  margin: 0px 1px -1px 1px;
}

.primary .nav li.tab a
,.primary .nav-tabs li.tab a
,.secondary .nav li.tab a
,.secondary .nav-tabs li.tab a {
  margin: 0;
  padding: 3px 10px;
  font-weight: bold;
  font-size: .9em;
}

.primary .nav li.tab a
,.primary .nav-tabs li.tab a {
  border: 1px solid #AAA;
  border-bottom: none;
  background: #D9E7FF;
  color: #333;
  
}

.primary .nav li.tab.active a
,.primary .nav-tabs li.tab.active a {
  background: transparent;
  border-bottom: none;
}

.primary .nav li.tab:not(.active) a:hover
,.primary .nav-tabs li.tab:not(.active) a:hover {
  background: #FFF7CD;
}

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