BenjaminAdams · August 29, 2015 14:01
diff --git a/css-nav-tabs.html b/css-nav-tabs.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 <head></head><body>
 <style>
 .tab-area p {
  font-size: 11px;
  color: #666;
 }


 .tab-area {
  width: 21%;
  margin: 2%;
  float: left;
 }

 input { 
  display: none;
 }

 .tab-link {
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  color: #007db8;
  font-weight: bold;
  text-decoration: none;
  display: block;
  float: left;
  height:25px;
  width: 332px;
  padding: 5px 0;
  text-align: center;
  border: 1px solid lightgray;
  border-left: 0;
  border-bottom: 0;
  
  background-image: -webkit-gradient(
 	linear,
 	left top,
 	left bottom,
 	color-stop(0, #FFFFFF),
 	color-stop(1, #EFEFEF)
 );
 background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
 background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
 background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
 background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
 background-image: linear-gradient(to bottom, #FFFFFF 0%, #EFEFEF 100%);
  
  
  
 }

 .tab-link:hover {
  background: #eee;
 }

 .tab-link:nth-of-type(1) {
  border-left: 1px solid lightgray;
 }

 .tab-link:hover {
  color: #666;
 }

 .tab {
  clear: both;
  background: white;
  padding: 25px;
  display: none;
  height: 180px;
  border: 1px solid lightgray;
 }

 .target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
 }

  .tab-area {
    width: 1000px;
    margin: 2% 2% 5%;
  }


 .tab-area input:nth-of-type(1):checked ~ label:nth-of-type(1),
 .tab-area input:nth-of-type(2):checked ~ label:nth-of-type(2),
 .tab-area input:nth-of-type(3):checked ~ label:nth-of-type(3) {
    background: #F9F9F9;
 	color: rgb(68, 68, 68);
 }


 .tab-area input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
 .tab-area input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
 .tab-area input:nth-of-type(3):checked ~ .tab:nth-of-type(3)
 {
  display: block;
 }

 .tabs-focus .tab-link:focus:after,
 .tabs-hover .tab-link:hover:after,
 #tabC:target ~ a:nth-of-type(3):after,
 #tabB:target ~ a:nth-of-type(2):after,
 #tabC:not(:target) ~ #tabB:not(:target) ~ a:nth-of-type(1):after,
 #tab-C:checked ~ label:nth-of-type(3):after,
 #tab-B:checked ~ label:nth-of-type(2):after,
 #tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):after {
  position: absolute;
  content: "";
  margin: 5px 0 0 0;
  width: 332px;
  height: 5px;
  display: block;
  background: white;
 }

 .tabs-focus .tab-link:focus:before,
 .tabs-hover .tab-link:hover:before,
 #tabC:target ~ a:nth-of-type(3):before,
 #tabB:target ~ a:nth-of-type(2):before,
 #tabC:not(:target) ~ #tabB:not(:target) ~ a:nth-of-type(1):before,
 #tab-C:checked ~ label:nth-of-type(3):before,
 #tab-B:checked ~ label:nth-of-type(2):before,
 #tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):before {
 content: ' ';
 height: 5px;
 background-color: #007db8;
 display: block;
 position: relative;
 top: -5px;
 }



 </style>

 <section class="tab-area tabs-checked">

 		<input checked="" type="radio" name="tab" id="tab-A">
 		<input type="radio" name="tab" id="tab-B">
 		<input type="radio" name="tab" id="tab-C">

 		<label class="tab-link" for="tab-A">Tab 1</label>
 		<label class="tab-link" for="tab-B">Tab 2</label>
 		<label class="tab-link" for="tab-C">Tab 3</label>

 		<article class="tab">
 			<h3>Tab 2</h3>
 			<p>Lorem Ipsum Dolor Sit</p>
 		</article>
 		<article class="tab">
 			<h3>Tab 2</h3>
 			<p>Lorem Ipsum Dolor Sit</p>
 		</article>
 		<article class="tab">
 			<h3>Tab 3</h3>
 			<p>Lorem Ipsum Dolor Sit</p>
 		</article>


 	</section>


 </body>

 </html>