[DEMO] CSSのみでグローバルメニューのhover以外をぼかしてhover中ボタンを強調する [詳細]

CSS のみで実装するグローバルメニューの hover 外をぼかしてマウスオーバーしている箇所を強調するテクニックの紹介です。
このテクニックは、以前書いた の HTML を利用した拡張版です。なので、前回サンプルの CSS のみを変更したものになります。

前回からの変更点として、#menu li a に対して display: block の記述を追加しました。
これがないと、Firefox2ではうまく表示されなかったためです。(Firefox2を対象に含めなければ特に指定の必要はありません)

対応ブラウザは、IE7~、Firefox2~、Safari4~(多分3とかでも大丈夫なはず)、Google Chrome、Opera10~で確認しています。
IE6 ではぼかしの効果は実現できませんが、hover 処理自体は正常にされるのでモダンブラウザ向けに実装しておく、という感じで使うといいと思います。