サイト内の各項目へのリンクをメニューとして横向きに配置した「メニューバー」を簡単に作るには、ただ普通にリンクを並べれば良いでしょう。標準で文字列は横向きに並びますから、バーのように見えるデザインさえ施せば「メニューバー」になります。

しかし、「メニュー」というのは一種の「リスト」なので、リストを構成するHTML（ul要素＋li要素）を用いて記述すべきだという意見もあります。そこで、リストとして記述した項目一覧を、スタイルシートで横向きに配置し、メニューバーのようにデザインする方法がよく使われています。

デザイン（レイアウト）を細かく指定すると複雑になりますが、「とりあえず普通に見えて使える」レイアウトなら、それほど量を記述しなくても作れます。

例えば、以下のようなHTMLソース（メニュー項目を記述したリスト）がある場合…

<ul id="menubar">
   <li><a href="/">ホーム</a></li>
   <li><a href="info.html">新着情報</a></li>
   <li><a href="prod.html">製品案内</a></li>
   <li><a href="comp.html">会社概要</a></li>
   <li><a href="supp.html">サポート</a></li>
   <li><a href="cont.html">お問い合わせ</a></li>
</ul>

これを、まったく装飾せずに表示させると、以下のように見えます。

代表的なブラウザでは、リスト項目の先頭に黒丸などの記号を付加して、縦向きに項目を配置します。この「リスト」をスタイルシートで装飾することで、「横向き」に配置します。
とりあえず、以下のようにスタイルシートを書けば、最低限の横向きデザインにできます。

ul#menubar {
   margin: 0px; /* ul内部の左端余白を消す(IE) */
   padding: 0px; /* ul内部の左端余白を消す(Fx,Op) */
}
ul#menubar li {
   list-style-type: none; /* 先頭記号を消す */
   float: left; /* リスト項目を横方向に並べる */
   margin: 0.3em 0.1em; /* 各項目周囲の余白 */
   border: 1px gray solid; /* 項目の枠線 */
   padding: 0px; /* 枠線と内容の距離をゼロに */
}

上記のスタイルシートで、とりあえず各項目は横向きに配置されます。項目同士が詰まって表示されないよう、余白も設けられます。項目の範囲が分かりやすいように、枠線も付加しています。

で、「メニュー」は当然「リンク」でもあるので、リンクに対する装飾も欲しいところです。そこで、以下のスタイルを加えます。

/* メニュー項目のリンクを装飾 */
ul#menubar li a {
   text-decoration: none; /* 下線を消す */
   display: block; /* ブロックレベルに */
   padding: 0.3em; /* 内部の余白 */
}
ul#menubar li a:hover {
   background-color: blue; /* 背景色 */
   color: white; /* 文字色 */
}

メニュー項目には枠線を付加してあるので、リンクを示す下線は消しています。（text-decorationプロパティ） まあ、付けておく方が分かりやすくて良いかも知れませんが。
displayプロパティに値「block」を指定することで、リンク自体をブロック化（ブロックレベル要素化）しています。これで、リンク項目内の全体に背景色を塗ったり、項目内の全体をクリック可能にすることができます。

hover疑似クラスを使って、メニュー項目（リンク）の上にマウスポインタを載せたときに、項目全体の背景色と文字色が変化するようになっています。

これらのスタイルシートを使って先ほどのHTMLを表示させると、以下のように見えます。（項目の上にマウスポインタを載せると、項目の色が変化します。）

スタイルシートが有効な環境であれば、横向きメニューバーのように配置されているはずです。スタイルシートが無効な環境だと、通常のリスト項目として表示されるでしょう。

なお、この「メニューバー」の直後に記述するブロックには、回り込みを解除するためのclearプロパティの記述が必要です。以下のように書いておくと良いでしょう。（aftermenuクラスを付加したp要素の場合）

p.aftermenu {
   clear: left;
}

あと、「バー」のように見せるには、ul要素全体に背景色を加えたり枠線を加えたりする必要があるかもしれません。ul要素に含まれるli要素は、全部floatプロパティで浮かせているので、ul要素自体の装飾にはちょっと工夫が必要です。その話はまた別の機会に。