CSSのみで簡単にタブ切り替えを作成する方法

こんばんは！
　
今回はライトなのですが。
CSSのみでタブ切り替えを実施する方法です。
　
かなり簡単な方法だと思います。
では…

CSS

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

HTML

<div id="tabmenu">
    <div id="tab">
        <a href="#tab1">TAB1</a>
        <a href="#tab2">TAB2</a>
        <a href="#tab3">TAB3</a>
        <a href="#tab4">TAB4</a>
        <a href="#tab5">TAB5</a>
    </div>
    <div id="tab_contents">
        <ul>
            <li id="tab1" name="tab1">"No1" this is tab container.you can write anythig.</li>
            <li id="tab2" name="tab2">"No2" this is tab container.you can write anythig.</li>
            <li id="tab3" name="tab3">"No3" this is tab container.you can write anythig.</li>
            <li id="tab4" name="tab4">"No4" this is tab container.you can write anythig.</li>
            <li id="tab5" name="tab5">"No5" this is tab container.you can write anythig.</li>
        </ul>
    </div>
</div>

ページ内リンクで各タブへと飛ばしています。
　
jQueryのスムーズスクロールと組み合わせるとスライダーにも使えますね♪

DEMO