基本のJavaScriptとCSSだけでタブメニューを作成のは大変面倒くさいです。
jQuery UIを利用して、簡単にタブメニューを作成の方法を紹介します。
シンプルのタブから、いろいろカスタマイズも説明します。

jQueryとjQuery UIのインストールはここを参照してください。

1、基本のタブメニューを作成

先ず、こんな形HTMLを準備してください。作成したいタブ数で<li>タグを書きます。
各<li>に対応する<div>も書きます。
<a>の属性hrefの値と<div>のidが一致しないといけないことを注意してください。
[html]
<div id="tabs">
<ul>
<li><a href="#tabs-1">日本酒</a></li>
<li><a href="#tabs-2">焼酎</a></li>
<li><a href="#tabs-3">ビール</a></li>
</ul>
<div id="tabs-1">
<p>・獺祭<br/>・十四代<br/>・久保田</p>
</div>
<div id="tabs-2">
<p>・佐藤<br/>・魔王<br/>・百年の孤独</p>
</div>
<div id="tabs-3">
<p>・朝日<br/>・YEBISU<br/>・麒麟</p>
</div>
</div>
[/html]

tabs()函数をコールして、タブを生成します。
HTMLロード時にタブ生成するため下記JavaScriptを実行させます。
[javascript]
$("#tabs").tabs();
[/javascript]

これで、タブメニューが生成されました。

2、折り畳めるタブを作成

tabs()函数を使用時に、オプションがサポートされます。
collapsible: trueを指定して、折り畳めるタブを作成できます。
[javascript]
$("#tabs").tabs({
collapsible: true
});
[/javascript]
タブメニューを二度クリックしてタブの折り畳みと展開の切替できます。

3、マウスオーバーでタブを切替

デフォルトはクリックでタブを切替する。
event: “mouseover”を指定して、マウスオーバーでタブを切替になります。
[javascript]
$("#tabs").tabs({
event: "mouseover"
});
[/javascript]

4、順番が変えれるタブメニュー

マウスでタブをドラッグ＆ドロップしてタブの順番を変えます。
[javascript]
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
[/javascript]

5、タブメニューを底部表示

タブメニューを中身の底部で表示させます。
JavaScriptでDOMを操作します。
タブのクラス(ui-tabs-nav)でタブを取得してappendToを使って底部に移動します。
これだけタブの丸角は上のままになっていますので、ui-corner-bottomのクラスを追加して丸角を底部に変更します。
JavaScriptはこんな感じです。
[javascript]
$( "#tabs" ).tabs();
// classでタブを探す、上の丸角を直角に、下の直角を丸角に変更する
$( "#tabs .ui-tabs-nav, #tabs .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
// タブを下に移動する
$( "#tabs .ui-tabs-nav" ).appendTo( "#tabs" );
[/javascript]
出来ました！

6、横でタブメニューを表示

ちょっと工夫します、CSSで横メニューの仕様を調整します。
[css]
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
[/css]

javascriptでタブにclassを追加します
[javascript]
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
[/javascript]

出来たタブはこんな感じです。

以上、jQueryUIを利用して、タブの作り方です。