@charset "Shift_JIS";
div.menubar {
	background-color: #0044cc;/* バーの背景色 */
	border-top-width: 0px;
	border-top-style: double;
	border-top-color: gray;/* バーの上端線 */
	border-bottom-width: 0px;
	border-bottom-style: double;
	border-bottom-color: gray;/* バーの下端線 */
	min-width: 630px;/* メインメニュー全部が収まる最低横幅 */
}

div.menubar ul#menu {
	margin-top: 0px;
	margin-right: -10px;
	margin-bottom: 0px;
	margin-left: 0px;/* メニューバー外側の余白 */
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;/* メニューバー内側の余白 */
	height: 25px;/* メニューバーの高さ */
}
div.menubar ul#menu li {
	width: 60px;/* メニュー項目の横幅 */
	height: 25px;/* メニュー項目の高さ(「メニューバーの高さ」と一致させる) */
	float: left;
	list-style-type: none;
	position: relative;
	margin-top: -10px;
}
div.menubar ul#menu a {
	background-color: #0044cc;/* メニュー項目の背景色 */
	color: white;/* メニュー項目の文字色 */
	line-height: 30px;/* メニュー項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */
	text-align: center;/* メインメニューの文字列の配置(中央寄せ) */
	text-decoration: none;/* メニュー項目の装飾(下線を消す) */
	display: block;
	width: 100%;
	height: 100%;
}
div.menubar ul#menu a:hover {
	background-color: teal;/* メニュー項目にマウスが載ったときの背景色 */
	color: yellow;/* メニュー項目にマウスが載ったときの文字色 */
}
/* メニューバー直後のClearfix */
div.menubar ul#menu { zoom:1; }
div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }


div.menubar ul#menu ul.sub {
	background-color: white;/* サブメニュー全体の背景色 */
	border-width: 0px;/* サブメニュー全体の枠線の太さ */
	border-style: solid;/* サブメニュー全体の枠線の線種 */
	border-color: white;/* サブメニュー全体の枠線の色 */
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: none;
	position: absolute;
}
div.menubar ul#menu ul.sub li {
	width: 100px;/* サブメニュー1項目の横幅 */
	height: 20px;/* サブメニュー1項目の高さ */
	border-width: 0px;/* サブメニュー1項目の枠線の太さ */
	border-style: solid;/* サブメニュー1項目の枠線の線種 */
	border-color: white;/* サブメニュー1項目の枠線の色 */
	margin-bottom: -5px;
	margin-left: -10px;
	margin-right: -15px;
}
div.menubar ul#menu ul.sub li a {
	line-height: 25px;/* サブメニュー1項目の行の高さ(「サブメニュー1項目の高さ」と合わせる) */
	text-align: left;/* サブメニュー1項目の項目名の配置(左寄せ) */
	text-indent: 5px;/* サブメニュー1項目の項目名前方の余白 */
}
div.menubar ul#menu ul.sub li a:hover {
	background-color: orange;/* サブメニュー項目にマウスが載ったときの背景色 */
	color: #ffffff;/* サブメニュー項目にマウスが載ったときの文字色 */
}

各サブメニューは、最初からすべてが表示されていると困るため、displayプロパティを使って非表示状態にしています。後で追記するJavaScriptで、表示・非表示を切り替えます。