Pure CSS Dropdowns

Experemental dropdowns - adding "drop down" and a close button to the "pure CSS tabs" by Chris Coyier

HTML

<div class="tab">
   <input type="radio" id="tab-1" name="tab-group-1">
   <label for="tab-1">List 1</label>
   <div class="tab close-tab">
      <input type="radio" id="tab-close" name="tab-group-1">
      <label for="tab-close">List 1</label>
   </div>

   <div class="content">
      <ul>
         <li><a href="#">Menu Item #1</a></li>
         <li><a href="#">Menu Item #2</a></li>
         <li><a href="#">Really Long Menu Item #3</a></li>
         <li><a href="#">Menu Item #4</a></li>
         <li><a href="#">Menu Item #5</a></li>
      </ul>
   </div>
</div>

CSS

html{
   background: black;
}

.tab {
    float: left;
    position: relative;
}
.tab label {
    background: linear-gradient(#eee, #ccc);
    padding: 10px 30px;
    cursor: pointer;
    text-align: center;
    display: block;
    position: relative;
}

.tab [type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    z-index: 1;
}
.content {
    position: absolute;
    top: 100%;
    opacity: 0;
    left: 0;
    background: #333;
    color: white;
    padding: 20px;
}
.content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.content a {
    color: white;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid #999;
    padding: 5px;
}  
[type=radio]:checked ~ label {
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}

.close-tab {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.close-tab label {
    background: #333;
    color: white;
}
[type=radio]:checked ~ label ~ .close-tab {
    z-index: 3;
}