css

.*{margin:0; padding:0;}
body{font-size:14px;line-height:2em;}
li{list-style: none;}
a{color:#666; text-decoration: none;}
a:hover{color:#f00;}
.clearfix {zoom:1}
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix li {float:left;width:100px;border:1px solid #000;text-align:center;background:red}
#slide_bar {width:408px;margin:0 auto}
.slide_under {width:406px;border:1px solid #000;}
.slide_box input[type="radio"] {display:none}
.slide_box .slide_under ul{display:none}
.slide_title label {display:block;cursor:pointer}
#a1:checked ~ .slide_title .a1,
#a2:checked ~ .slide_title .a2,
#a3:checked ~ .slide_title .a3,
#a4:checked ~ .slide_title .a4 {background:#000;color:#fff}
#a1:checked ~ .slide_under .a1-list,
#a2:checked ~ .slide_under .a2-list,
#a3:checked ~ .slide_under .a3-list,
#a4:checked ~ .slide_under .a4-list {display:block;}

html

<div id="slide_bar">
? ?  <div class="slide_box">
? ? ? ? ? <input type="radio" name="tab" id="a1" checked="checked" />
? ? ? ? ? <input type="radio" name="tab" id="a2" />
? ? ? ? ? <input type="radio" name="tab" id="a3" />
? ? ? ? ? <input type="radio" name="tab" id="a4" />
? ? ? ? ? <div class="slide_title">
? ? ? ? ? ? ? <ul class="clearfix"> 
? ? ? ? ? ? ? ? ?  <li class="a1">
? ? ? ? ? ? ? ? ? ? ? ? <label for="a1">a1</label>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ?  <li class="a2">
? ? ? ? ? ? ? ? ? ? ? ?  <label for="a2">a2</label>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li class="a3">
? ? ? ? ? ? ? ? ? ? ? ?  <label for="a3">a3</label>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ?  <li class="a4">
? ? ? ? ? ? ? ? ? ? ? ?  <label for="a4">a4</label>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ?  </ul>
? ? ? ? ? ? </div>?  
? ? ? ? ? ? <div class="slide_under">
? ? ? ? ? ? ?  <ul class="a1-list">
? ? ? ? ? ? ? ? ?  <li>1</li>
? ? ? ? ? ? ? ? ?  <li>1</li>
? ? ? ? ? ? ? ? ?  <li>1</li>
? ? ? ? ? ? ? ? ?  <li>1</li>
? ? ? ? ? ? ?  </ul>
? ? ? ? ? ? ?  <ul class="a2-list">
? ? ? ? ? ? ? ? ?  <li>2</li>
? ? ? ? ? ? ? ? ?  <li>2</li>
? ? ? ? ? ? ? ? ?  <li>2</li>
? ? ? ? ? ? ? ? ?  <li>2</li>
? ? ? ? ? ? ?  </ul>
? ? ? ? ? ? ?  <ul class="a3-list">
? ? ? ? ? ? ? ? ?  <li>3</li>
? ? ? ? ? ? ? ? ?  <li>3</li>
? ? ? ? ? ? ? ? ?  <li>3</li>
? ? ? ? ? ? ? ? ?  <li>3</li>
? ? ? ? ? ? ?  </ul>
? ? ? ? ? ? ?  <ul class="a4-list">
                   <li>4</li>
                   <li>4</li>
                   <li>4</li>
                   <li>4</li>
               </ul>
            </div>
     </div>
</div>