ロールオーバーリンク１

リンクに背景色や背景画像を指定してロールオーバー効果（カーソルをのせると画像が変わるアレ） をやろうというものです。バリエーションが豊富なのでいくつかに分けて紹介します。
javascriptなしでもここまでできるんです！

一番シンプルな例

次のようなスタイルシートを書いて、適用させたいaタグにclass設定をするだけです。

a.sample{
    background-color:#FFFFB0;
}
a:hover.sample{
    background-color:#FFCC99;
}

ただ背景色を指定しただけです。a:visitedを追加して背景色を変えてもいいかもしれません。

余白をつけてみました

余白をつけるためにpaddingを加えてみました。

a.sample1{
    background-color:#FFFFB0;
    padding:0.5em 1em;
}
a:hover.sample1{
    background-color:#FFCC99;
}

paddingの値はお好みで。

幅をそろえて余白をつけてみました

幅を固定するといえばwidthとheightですね

a.sample2{
    display:block;
    background-color:#FFFFB0;
    padding:0.5em 1em;
    width:100px;
    height:15px;
}
a:hover.sample2{
    background-color:#FFCC99;
}

注目して欲しいのはdisplay:block;です。これを忘れてはいけません。
なぜかというと、インライン要素にwidthやheightを指定しちゃいけないことになっているから。 aタグはインライン要素なので、display:block;を使ってブロック要素にしてあげる必要があります。

---

使いこなすための＋α

幅を固定するにはdisplay:block;がいるみたいだけど、改行されちゃうよ〜。 横に並べるにはどうすればいいの？という人もいるのではないでしょうか。
そんな時はulタグでメニューと組み合わせてみましょう。

ulやliに設定したプロパティの意味はulタグでメニューを見てください。

ul.sample3{
    list-style:none;
    width:100%;
    padding-left:0;
    margin-left:0;
}
li.sample3{
    list-style:none;
    float:left;
    border-width:2px;
    border-color:#FFEEDB;
    border-style:ridge;
    text-align:center;
}
a.sample3{
    display:block;
    background-color:#FFFFB0;
    padding:0.5em 1em;
    width:90px;
    height:15px;
}
a:hover.sample3{
    background-color:#FFCC99;
}

liにtext-align:center;を設定しておくといいと思います。
これだけでも十分使えるメニューバーになるでしょう。
スタイルシートさえあれば魅せるためのjavascriptTipsなどいらないのかもしれません。