テキストリンクを横並びで表示させる。テキスト同士の間に縦線や斜線入れてリンクが区別しやすいようにすると尚良い。

■サンプル

■タグ
<!– ナビゲーションメニュー –>
<div id=”menu”>
<ul>
<li>|</li>
<li><a href=”#”>sample1</a></li>
<li>|</li>
<li><a href=”#”>sample2</a></li>
<li>|</li>
<li><a href=”#”>sample3</a></li>
<li>|</li>
</ul>
</div>
<!– ナビゲーションメニュー –>

■スタイルシート(数値は調整可)

○メニュー全体(幅と高さを入力して細かい調整可)
#menu{ background-color:#FFFFFF; text-align:left;}

ul {
list-style: none; font-weight: bold; text-align: center; margin: 0; padding: 0.2em 0;
color: #FFFFFF; background: #003399;
}
li {
display: inline; white-space: nowrap;
}
li a {
text-decoration: none; padding: 0.2em 0.8em; background: transparent;
}
li a:hover {
color: #003399; background: #FFCC00;
}

○テキストリンクカラー調整
.spaecial{ text-align: center; }

A.spaecial:link { color: #FFFFFF; }
A.spaecial:visited { color: #FFFFFF; }
A.spaecial:active { color: #FFFFFF; }
A.spaecial:hover { color: #013B80; }

※実際に入力するときは<>は半角の<>を使用します。