CSS Tabbed menus

Experiments to find the simplest tabbed menu

by toubia95

HTML

<ul class="first">
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Lien 3</a></li>
</ul>
<br /><br />
<nav class="second">
  <ul>
    <li><a href="#">Actualités</a></li>
    <li><a href="#">Options</a></li>
    <li><a href="#">Publications</a></li>
      <li><a href="#" class="active">Profil</a></li>
  </ul>  
</nav>
<div class="second-content"></div>
<br /><br />
<nav class="third">
  <ul>
    <li><a href="#">Actualités</a></li>
    <li><a href="#">Options</a></li>
    <li><a href="#">Publications</a></li>
      <li><a href="#" class="active">Profil</a></li>
  </ul>  
</nav>
<div class="third-content"></div>

CSS

/* First, using position:relative */

html {
    padding: 20px;
    font: 12px/1.2 Verdana, sans-serif;
}

.first {
   background:white;
   padding: 0 5px;
   border-bottom: 1px solid silver;
}

.first li {
   display: inline-block;
}

.first a {
   display: block;
   background: #eee;
   border: 1px solid silver;
   position: relative;
   top: 1px;
    text-decoration: none;
    color: black;
    border-radius: 3px 3px 0 0;
    padding: 2px 5px;
}

.first a:hover {
   background: #ccc;
}

.first a.active {
   background: white;
   border-bottom: 1px solid white;
   font-weight: bold;
   color: #444;
}

/* Second */
.second ul {
  list-style-type: none;
  background: transparent;
  padding-top: 10px;
  height: 30px;
  border-bottom: 1px solid #777;
  font-size: 14px;
  line-height: 17px;
  padding-left:10px;
  margin-bottom: 0; 
  min-width: 500px;
}

.second a {
 float: left;
 display: block;
 padding: 6px 15px;
 background: #ccc;
 color: white;
 text-decoration: none;
 margin-left: 8px;
 border-radius: 5px 5px 0 0;
}

.second a:hover {
 background: #999;
}

.second .active, nav .active:hover {
 background: white;
 color: #555;
 font-weight: bold;
 border: 1px solid #777;
 border-bottom:  2px solid white;
}

.second-content {
  border: 1px solid #777;
  border-top: none;
  display: block;
  height: 50px; 
  min-width: 500px;
  background:white;
}

/* third */

.third ul {
 list-style-type: none;
 padding:0;
 margin-bottom: 0;
 padding-left: 10px;
 min-width: 500px;
float: left;
}

.third a {
  display: block;
  float: left;
  padding: 5px 10px;
  text-decoration: none;
  position: relative;
}

.third a:hover {
  text-decoration: underline;
}

.third .active, .active:hover {
  background:#ccc;
}

.third-content {
  background:white;
  display: block;
  height: 50px;
  border: 3px solid #ccc;
  min-width: 500px;
  float: left;
  clear: left;
  width: 100%;
}