ロールオーバーリンク３

ロールオーバーリンク１にさらに手を加えたサンプルをいくつか紹介します。
画像なしの限界を極めるのもいいかもしれませんね。

ボーダーを応用する（縦メニュー編）

ちょっとした計算が必要になってきます。

a.sample{
    display:block;
    background-color:#FFFFA7;
    padding:0.5em	20px;
    width:80px;
    height:15px;
    text-decoration:none;
}
a:hover.sample{
    background-color:#FFFFD5;
    padding:0.5em	20px 0.5em 10px;
    border-left:solid 10px #CC9966;
}
a:active.sample{
    background-color:#FFFFD5;
    padding:0.5em	20px 0.5em 10px;
    border-left:solid 10px #FFCC00;
}

このサンプルを使うには、あらかじめ使いたいページを標準準拠モードで書く必要があります。 それでもIE5.5などではちょっと表示が崩れてしまいます。
さらにテクニックを追加すれば大丈夫なのですが、今回はそこまでやっていません。

なぜ条件が細かいかというと、padding、border-widthの値を微調整する必要があるからです。

a:hover&activeの左側のpaddingの値（10px）とボーダーの太さの値（10px）の和をa.samleで指定した左側のpadding（20px）と同じにしなければなりません。 これをやらずにボーダーだけを追加してしまうと、文字の位置がずれたり、全体の長さが変わってしまいます。

ボーダーを応用する（横メニュー編）

ulタグでメニューと組み合わせて横並びバージョンにしてみました。

ul.sample1{
    list-style:none;
    margin-left:0em;
    padding-left:0em;
}
li.sample1{
    list-style:none;
    float:left;
}
a.sample1{
    display:block;
    background-color:#FFFFA7;
    padding:6px 20px;
    width:80px;
    height:15px;
    text-decoration:none;
}
a:hover.sample1{
    background-color:#FFFFD5;
    padding:6px 20px 3px 20px;
    border-bottom:solid 3px #CC9966;
}
a:active.sample1{
    background-color:#FFFFD5;
    padding:6px 20px 3px 20px;
    border-bottom:solid 3px #FFCC00;
}

こちらはaの下側のpaddingの値（6px）と、a:hover&activeの下側のpaddingの値（3px）とボーダーの太さの値（3px）の和を同じにする必要があります。 これをやらずにボーダーだけを追加してしまうと、文字の位置がずれたり、全体の高さが変わってしまいます。
pxではなく、emなどでも指定できますが、微妙に高さが変わってしまうことがあります。

---

使いこなすための＋α

使いこなすためには、とにかくやってみることです。思いついたアイディアをどんどん試してみてください。
何気に今回はクリックするとさらにボーダーの色が変わる3段変化になっています。
activeの部分をいじればもっと凄いことができるかもしれません。