CSS だけで(JavaScript を使わずに)ロールオーバーさせる方法を学んだ。やり方はいくつかあるけど、もっともスマートな方法はやっぱりアップルが採用している方法かな。CSS を無効にしたときの画面も美しい。結局そういうコーディングが SEO 的にも最適だし。 文字は padding-top と overflow: hidden で見えないようにしているようだ。その上で hover したときに背景画像のポジションをスライドさせている。 #globalheader #globalnav li a { float: left; width: 117px; height: 0pt; padding-top: 38px; overflow-x: hidden; overflow-y: hidden; } #globalheader #globalnav li a, #globalheader
![APPLE のサイトのナビゲーションバーの仕組み(CSS でロールオーバー) - minorio のプログラミング・メモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d285befea4d5384493752442075f991c472ee370/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fminorio%2F20071202%2F20071202220945.png)