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>