ネットショップ陳列に便利なタブ表示(CSS,HTML)

ネットショップ等で、限られた範囲に表示する時に便利なタブ表示

↓↓↓がサンプル

陳列に便利なタブ表示をCSSのみで実装するサンプルソース

Javascript等は使わずにcssのみで可能
HTMLの記述

    

        スーツ
        金運
        浴衣
    
    

        

            
タブ１に表示する内容
            
タブ２に表示する内容
            
タブ３に表示する内容
        
    

CSSの記述

#tabmenu_outline{
    position: absolute;
    top:30px;
    left:0px;
}
#tabmenu{
    padding:0px;
    margin:0px;
    color:#333;
    font-size: 11px;
    width:300px;
    position:relative;
}
  
#tabmenu div#tab{
    position: absolute;
    top:0px;
    left:0px;
}
  
#tabmenu div#tab a{
    float: left;
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 100px;
    display: block;
    text-decoration:none;
    color:#333;
    padding:5px 0 0 0;
    background:#eee;
}
  
#tabmenu div#tab a:hover{
    background:#000;
    color:#fff;
}
  
div#tab_contents{
    width:300px;
    overflow:
    hidden;clear:both;
    text-align:center;
}
div#tab_contents ul{
    width:2500px;
    padding:0px;
    margin:0px;
    text-align:center;
}
div#tab_contents ul li{
    float: left;
    width:260px;
    list-style-type:none;
    padding:44px  20px  20px 70px;
    background:#e2e2e2;
}