遅延付き pure CSS ドロップダウンメニューの作り方

How To Create a Delayed Pure CSS Dropdown Menu

CSSはやりたいことと表現が乖離していてひどい言語ですね。いつかグーグルかアドビあたりが簡単できれいな新スタイルシート言語を出して広まってくれればいいと願ってます。
さて、表題のとおり、最近ではJavascriptなしでCSSだけでドロップダウンメニューを作れます。利用しているサイトもちらほらとあります。
ですが、ドロップダウンメニューが開くまでの遅延時間を設けていないサイトがほとんどで、とってもウザいことになっています。マウスが通過するだけでぺろっとゴミが…おっと失礼、メニューが開いて記事本文の上にかかって邪魔したりします。
どうせ誰も使わないメニューなんかないほうがいいのですが、ちゃんと先端行ってますよアピールのためにはゴミメニューを表示しないといけない事情もありそうなので、今日はCSSだけで遅延付きドロップダウンメニューの作り方を説明します。
まずは、遅延なしの場合ですが、↓ここを見てください。すばらしい！
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

では、これを遅延ありに改造します。CSS3 transitions を利用します。nav ul ul と nav ul li:hover > ul を置き換え、nav ul li > ul を追加します。

nav ul ul {
	display: block;
	visibility: hidden;
	transition-property: visibility;
	-webkit-transition-property: visibility;
}

nav ul li > ul {
	transition-delay: 0s;
	-webkit-transition-delay: 0s;
	visibility: hidden;
}

nav ul li:hover > ul {
	transition-delay: 300ms;
	-webkit-transition-delay: 300ms;
	visibility: visible;
}

できあがり！マウスが上に乗ってから 300ms 後にメニューが表示されます。消えるときは遅延はありません。display はアニメ効果がつけられないので、効果をつけられる visibility を利用しました。

まあ、説明しておいてなんですが、メニューにごてごてと詰め込みすぎても誰も使わないですよ。シンプルであることのほうが重要だと思います。