マルチ階層可能なドロップダウンメニュー/ナビゲーション/SolidStateEveryday

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<ul class="menu" id="menu">
	<li><a href="#" class="menulink">Dropdown One</a>
		<ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
					<li><a href="#">Navigation Item 4</a></li>
					<li><a href="#">Navigation Item 5</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="sub">Navigation Item 3</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li>
						<a href="#" class="sub">Navigation Item 3</a>
						<ul>
							<li class="topline"><a href="#">Navigation Item 1</a></li>
							<li><a href="#">Navigation Item 2</a></li>
							<li><a href="#">Navigation Item 3</a></li>
							<li><a href="#">Navigation Item 4</a></li>
							<li><a href="#">Navigation Item 5</a></li>
							<li><a href="#">Navigation Item 6</a></li>
						</ul>
					</li>
					<li><a href="#">Navigation Item 4</a></li>
				</ul>
			</li>
			<li><a href="#">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</li>
	<li><a href="#" class="menulink">Non-Dropdown</a></li>
	<li>
		<a href="#" class="menulink">Dropdown Two</a>
		<ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</div>
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script>
</body>
</html>

	JavaScript Dropdown Menu with Multi Levels - Web Development Blog

マルチ階層可能なドロップダウンメニューです。
フレームワークを使用せずに単独で動作し、滑らかなフェードモーションも付いています。
デザインはCSSにて調節可能です。

セットアップ

ダウンロード＆セッティング

サイトへ行き、dropdown-menu.zipをダウンロードしてきます。
（Click here to download the source code.という箇所をクリック）解凍して出てきたdropdown-menuの中身をアップロードします。
詳しいタグの構造などはフォルダ内のindex.htmlを参考にしてください。ヘッダーに読み込ませるものは以下の通りです。

そして大切なのがトリガーを<body>内に記述すること。
メニューより後であれば場所は任意でOKです。

menuという箇所でメニューのターゲットを指定しています。
これでスクリプトが動くようになります。

CSSの記述でリンクの経路を分かりやすく設定することも出来ます。

ul.menu .menuhover{background-color:#FFCC00}　

上記のようにで背景を指定すると良いでしょう。