Commit Lab

久しぶりにCSSでナビゲーションメニューをロールオーバーさせようと思ったものの、2時間程IE6の擬似クラスhoverで詰んでました。

IE6だとulにカーソルを合わせるとhoverの呪いで高さが変わっちゃうあるアレです。

絶対また忘れて試行錯誤しそうなのでメモを
ブロック要素の内から3番目がどうとか、2番目の幅が･･･マージンが･･･（確実に不確か）ってうろ覚えの知識で色々試したものの解決せず。

結局原因はたぶん

CSS

ul#nav {
width: 596px;
padding-top: 12px;  /* ←こいつ */
}

とりあえず意図したように動いたんでよかったのですが、
忙しいのに貴重な2時間が･･･

1×138 pxの画像をリピートさせて
ロールオーバー+現在開いているページのボタンの色を変えるCSS

CSS

ul#nav {
margin: 0;
padding: 0;
width: 720px;
}

ul#nav li {
float:left;
width: 100px;
font-size: 77%;
text-align:center;
line-height: 3.7;
border-left: 1px dashed #ccc;
list-style-type: none;
background-color: #E0E0E0;
}

ul#nav li a {
position: relative;
display: block;
height: 3.7em;
background-image: url(n-bg.gif) repeat-x;
color: #3e3e3e;
text-decoration: none;
}
ul#nav  li  a.here { background-position: 0px -92px;}
ul#nav li a:hover,ul#nav li a active { background-position: 0px -46px; }
ul#nav li.top { border-left: none;}

XHTML

<ul>
<li><a href="#" id="here" name="here">test1<a＞</li＞
<li><a href="#">test2<a></li＞
<li><a href="#">test3<a></li＞
</ul>

みたいな感じです
間違いがあったら教えてください＞＜

[追記]
手直ししたものを用意しました
こういう感じになります

サンプル
これに使ってる部品は
n-bg.gif
これ一つです

表現したいものによっては他の手法を使わなければならない場合もあるのですが、CSSでロールオーバーをする場合は、text-indent: -9999px;よりかはこちらの方が好きです。
テキストも残りますしね

まぁそこは柔軟に対応しますが