CSS:メニューを作る

jQueryはおいといてCSSメニュー

　最近のWebサイトはプルダウンメニューがついている事が多いというか、もうプルダウンメニューのないサイトはサイトにあらず、な勢いですな。
　てなわけで、「早くサイトになりたーい」と鳶嶋工房さんが言うので、メニューに挑戦です。
　トップページにでも仕込んでみようかな。

メニューです

　メニューの多くは<ul>あたりで作られているみたいです。
　HTML5には<menu>ってタグがあるので、それ使ってみましょう。

　まずは、<li>をblock要素にしてfloat:left;して並べる。
　ここまでは普通のメニュー。

　プルダウン部分をdisplay:none;にしておく。
　で、一つ上のli:hover時小要素であるプルダウンをdisplay:block;にする。
　これで、メニューの上にポインタが乗った時にプルダウン部分が出現するようになる。

　そのままだと、出現時に周りの要素を押しのけて出てくる。
　メニューは上に重なって欲しいので、position:absolute;にしておく。
　基本はこんだけ、あとはひたすら調整。

<menu class="sampleA">
	<li><a href="#">メニューA</a></li>
	<li><a href="#">メニューB_0</a>
		<menu>
			<li><a href="#">メニューB_1</a></li>
			<li><a href="#">メニューB_2</a></li>
		</menu>
	</li>
	<li><a href="#">メニューC</a></li>
</menu>

　スタイルシートは全部書くと、なんだかよく分からなくなるので、主要部分だけ抜粋。
　詳しくはこのページのスタイルシートを見てちょーだい。

.sampleA>li {
	display: block;
	float: left;
}

.sampleA>li>menu {
	display:none;
	position:absolute;
}

.sampleA>li:hover menu {
	display:block;
}

　今日はここまで。