このサイトのページトップに複数のサイトを行き来できるように、ナビバーを設置しています。
HTMLソースにメニュー項目を羅列し、あとはスタイルシートでボタン風にするなどの飾り付けをしています。

まず、次のようなナビバーの項目をHTMLソースの最後の方、つまり</body>の手前に記述します。
なぜソースの下かというと、アクセシビリティの関係でそうします。

<div id="navibar">

<div class="navi">

<a href="……">メニュー項目1</a>

<a href="……">メニュー項目2</a>

</div>

</div>

次にスタイルシートを編集します。

ナビバーのスペースを空けるために、ページ全体を下げます。

body {
margin-top:20px;
}

ナビバーをページトップに表示させます。

#navibar {
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
}

ナビバーの文字色や背景色を指定します。

.navi {
color:#000;
background:#CCC;
font-size: 10px;
padding:5px;
}

リンクする文字列には、ボタン風に囲みを入れます。

.navi a,
.navi a:link,
.navi a:visited {
color: #555;
text-decoration: none;
padding:2px;
border-top:1px solid #FFF;
border-left:1px solid #FFF;
border-bottom:1px solid #555;
border-right:1px solid #555;
}

マウスをのせると文字色などを変化させることができます。

.navi a:hover {
color: #000;
}

マウスをクリックするとボタンがへこんだようにします。

.navi a:active {
color:#F00;
background:#999;
border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #FFF;
border-right:1px solid #FFF;
}