解説

見出しとはずれる内容になりますが、大規模なサイトには必ず必要となる、各ページに共通のナビゲーションメニュー（グローバルメニューなどと呼んだりもします）部分は、実はあまり画像を使わなくても同じらしく表現する事が可能なのです。今回はそれについて考えてみましょう。

まず、ナビゲーションメニューについて考えます。
ナビゲーションメニュ−は大抵の場合、次の要件を満たしている必要があります。

1. 行き先が「何が書かれているページなのか」を示す単語や単文
2. マウスポインタが現在どのメニューを指し示しているのかをガイドする機能
3. それがナビゲーションメニュー群である事を明示する

いかがでしょうか。
まず１番目の「行き先が「何が書かれているページなのか」を示す単語や単文」についてですが、これは例えば「新着情報」や「製品紹介」といった単語／単文が記載されている事が多く、フォント（書体）の差はあれ、だいたい文字で記載しているケースが多いでしょう。
これを実現するには、通常の <a href="url"></a> の記述の仕方で可能です。

次に２番目の「マウスポインタが現在どのメニューを指し示しているのかをガイドする機能」についても考えてみましょう。これは a:link, a: hover, a:active, a:visited を使い、マウスの挙動に反応させる事が出来ます。現状、 JavaScript を利用するよりも平易で確実でしょう。

最後に３番目の「それがナビゲーションメニュー群である事を明示する」についてですが、これは視覚的な要素が強い問題ではないかと思われます。つまり、それらのリンクがいかにもボタンらしかったりと、他の部分とリンクの雰囲気が違っている必要があります。
多くのサイトの場合、この問題点の解として、ナビゲーションメニュー部分を画像で作られていますが、これは CSS を利用する事で解決する事が出来ます。例えばボタンらしくする場合、「画像を使わずボタンのようなリンクを作る」で紹介した方法が有効です。

さて、前置きが長くなりましたが、ナビゲーションメニューの部分をウェブデザインをする際、これらの事を考えて、かつ、画像でメニューを作るメリット／デメリットの両方を充分に比較し、どちらがそのサイトにふさわしいかを決める必要があります。そして、「今回はテキストによるナビゲーション群が有効だ」といった場合、こんなナビゲーションメニューを作ってみました。

<style type="text/css">

 div{
  background-color: #555555;
  color: #545454;
  white-space: nowrap;
 }
 
 a{
 /* 角ボタンを作る */
  background-color: #aaaaaa;
  border-style: outset;
  border-width: 2px;
  border-color: #aaaaaa;
  
  padding-left: 5px;
  padding-right: 5px;
  
  text-decoration: none;
 }
 
 a:hover{
  background-color: #cccccc;
 }
 
 a:active{
  background-color: #cccccc;
  border-style: inset;
 }
 
</style>

<div>
 |<a href="url">リンク１</a>|<a href="url">リンク２</a>|<a href="url">リンク３</a>|<br>
 |<a href="url">リンク４</a>|<a href="url">リンク５</a>|<a href="url">リンク６</a>|<br>
</div>

ここでようやく white-space: nowrap; の説明になりますが、グローバルメニューを途中で改行したくない、デザイン的な面を優先したい、という場合は、この nowrap が有効です。また、リンクとリンク（アンカーとアンカー）は連続せず、何かしらの区切りを入れた方が良いと進められている{ WAI による。( 和訳 ) }ようなので、例えば背景色と文字色を一緒（もしくは近似）にした区切りを入れておくと良いかもしれません。