faLog

Example

Require

動作確認を行ったブラウザです。IE三世代で動けば大体の人が使えるわけですが、CSSの恩恵に授かれるのはマイノリティーのみと言うのが何かもう…素敵な事で。
javascriptを使うのはIEだけなのでスクリプトエラーを気にする必要は無いです。
NS4やIE4はCSSを読まないようにフィルタリングした方が良いでしょう。特にNS4。

Windows

IE5.01, 5.5, 6.0, 7.0(Beta)、Firefox1.0.6

Mac OSX

IE5.23、Safari2.0、 Firefox1.0.4、 Opera8.01(6は駄目っぽいです。jsもCSSも反応無し)

Style sheet

メニューの横幅はDLだけで指定しています。高さは指定無しなのでフォントサイズの拡大などでレイアウトが変わりますから、余裕を持ってレイアウトするか、画像でリンクを作ると良いです。アクセシビリティとかどうでも良いなら高さを絶対指定してoverflow:hiddenという手もあります。(対応ブラウザが減りますが。)
逆にもう少しユーザビリティを上げるならdlの横幅を%で指定し、余裕を持って#menu_containerの横幅を指定する手もあります。
#menu_container aのwidthにCSSハックを使っています。
これが無いとIEと標準準拠ブラウザで表示のズレが発生しますが、ボーダーを使わなければ必要ありません。

#menu_container
	{
	position: absolute;
	margin: 0 0 0 20px;
	}
#menu_container dl
	{
	width: 92px;
	margin: 0;
	float: left;
	font-size: 80%;
	background: #369;
	color: #fff;
	}
#menu_container dt
	{
	text-align: center;
	border: 1px solid black;
	padding: 3px;
	}
#menu_container dd
	{
	display: none;
	margin: 0;
	border-left: 1px solid black;
	border-right: 1px solid black;
	}
#menu_container dl:hover dd
	{
	display: block;
	}
#menu_container a
	{
	display: block;
	border-bottom: 1px solid black;
	-width: 90px;
	line-height: 180%;
	background: #fff;
	padding: 3px;
	}
#menu_container a:hover
	{
	background-color: #ccc;
	}

HTML

後付けでイベントハンドラを挿入するのでメニューの振る舞いに関してHTMLに手を加える必要はありません。手打ちでコードを書く人には良いんじゃないでしょうか。
MY MENU 4,MY MENU 5…と水平方向に増やす事は可能ですが、javascriptとcssに手を加えない限り階層構造の入れ子メニューは作れません。

<div id="menu_container">
	<dl>
		<dt>MY MENU 1</dt>
		<dd><a href="#">MENU 1</a></dd>
		<dd><a href="#">MENU 2</a></dd>
		<dd><a href="#">MENU 3</a></dd>
		<dd><a href="#">MENU 4</a></dd>
	</dl>
	<dl>
		<dt>MY MENU 2</dt>
		<dd><a href="#">MENU 1</a></dd>
		<dd><a href="#">MENU 2</a></dd>
		<dd><a href="#">MENU 3</a></dd>
		<dd><a href="#">MENU 4</a></dd>
	</dl>
	<dl>
		<dt>MY MENU 3</dt>
		<dd><a href="#">MENU 1</a></dd>
		<dd><a href="#">MENU 2</a></dd>
		<dd><a href="#">MENU 3</a></dd>
		<dd><a href="#">MENU 4</a></dd>
	</dl>
</div>

Javascript

IEのみjavascriptを使用してイベントハンドラをくっ付けます。他のブラウザには用が無い部分です。
DOMによる正攻法だと面倒臭いのでinnerHTMLをリプレースしています。for文などでノードを辿って属性設定するよりコッチのほうが処理速度も早いようです。
onloadでif文を呼び出すと読み込み完了まで待たされる事になりますから、このスクリプトをメニューの直後に挿入するか、外部jsにしてメニューの直後にscriptタグを挿入する方が良いでしょう。
UA判定等のif文を使っているのはIEコメントアウトだとMacIEで機能しないから。

if(document.getElementById && document.all && navigator.userAgent.indexOf("Opera")<0){
	var obj = document.getElementById("menu_container");
	obj.innerHTML = obj.innerHTML.replace(/<dl>/gi,"<dl onmouseover='pull(this)' onmouseout='pull(this)'>");
}

function pull(obj){
	for(var i=0;i<obj.childNodes.length;i++)
		if(obj.childNodes[i].nodeName.toUpperCase()=="DD")
			obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block";
}