前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。

今回のポイントは、#menu04 li のdisplay: をinline;にして#menu04 li aのfloat: left;にすることで項目を横に並べることにあります。
更に横幅には限界があるので１つの項目に対して「どれだけの横幅を取るか？」を考慮しなければいけません。これには、「各項目の横幅を同じサイズに設定するパターン」、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」、「項目１つ１つに横幅を設定するパターン」などなどがあります。
今回は、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」を作ってみます。横幅の関係でメニュー項目の文字列を若干変更しています。

#menu04 ul {
 width: 600px;
 border-left: 1px solid #ccc;
}
#menu04 li {
 display: inline;
}
#menu04 li a {
 background: #ddd;
 width: auto;
 height: auto;
 padding: 2px 10px;
 float: left;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu04 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}

サンプル

以上で完成です。