ｃｓｓでタブの２段重ねの方法を教えてください

質問

当方、ｈｔｍｌ、ｃｓｓ初心者です。javascriptに関しては全くちんぷんかんぷんです。

http://xampp.utun.net/
このようなサンプルがあったのですが、これを改造して、
タブを縦２段でレイアウトしたいのですが、
方法を教えて頂けないでしょうか？

CSSソース
-----------------------------------------------------------------------

<style type="text/css">
/* ▼(A)表示領域全体 */
div.tabbox { margin: 0px; padding: 0px; width: 400px; }

/* ▼(B)タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
/* ▼(B-2)リンクをタブのように見せる */
display: block; width: 5em; float: left;
margin: 0px 1px 0px 0px; padding: 3px;
text-align: center;
}
/* ▼(B-3)各タブの配色 */
p.tabs a.tab1 {background-color: blue;color: #000;}
p.tabs a.tab2 { background-color: #aaaa00; color:white;}
p.tabs a.tab3 { background-color: red; color: white; }
p.tabs a.tab4 { background-color: red; color: white;}
background-color: #F00;
color: white;
}
p.tabs a:hover { color: yellow; }

/* ▼(C)タブ中身のボックス */
div.tab {
/* ▼(C-2)ボックス共通の装飾 */
height: 150px; overflow: auto; clear: left;
}
/* ▼(C-3)各ボックスの配色 */
div#tab1 { border: 2px solid blue; background-color: #ccffff; }
div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; }
div#tab3 { border: 2px solid red; background-color: #ffcccc; }
div#tab4 { border: 2px solid red; background-color: #ffcccc; }
div.tab p { margin: 0.5em; }
</style>
-----------------------------------------------------------------------------

上記の通りです。
ご指導、ご鞭撻の程を宜しくお願いします。

回答No.1

ok-rjak

回答するために質問です。

縦2段とは、

１．タブをクリックすると、そのタブに応じたタブが出てきて、さらにタブをクリックすると内容が表示される。

２．サンプルのタブが、ただ単に上下２つに並んでいるだけ。

どちらでしょう？