CSSだけのメニュー

Web CSS

概要

はてなの人気記事というところに、CSSだけで作れるメニューというネタが掲載されていた。ただしIEはCSSだけでは無理なので、Gecko系系とOpera7以上ならCSSだけで可、という事らしい。
http://gigazine.net/index.php?/news/comments/20060728_purecss/
一応最小構成にまとめたのを置いてみた。著作権が怪しいので9月頃には削除するかも。
http://tsuge.astgate.biz/blog/cssmenu.html

要約

肝は、この二つ。

ul.makeMenu li > ul {
  display: none;
ul.makeMenu li:hover > ul {
  display: block;
}

ま、liをはじめは隠しておいて、li:hoverでdisplayを操作しているという事。
他はブロック要素、absolute、relativeの関係がわかれば問題なく理解出来ると思われる。

補足

CSSToShowとCSStoHighlightとCSStoHighLinkはIE絡みなので無視してよし。
ul.makeMenu li aを、ブロック要素でwidth:100%指定をしているのは、li要素自体がリンクのように動作しているので、liがクリックされたらaをクリックしないと不自然になってしまう点の対応だと思われる。
意外な使い道があるかもしれないな。