今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。

このタイプは、１つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列を若干変えてfont-size: 0.8em;で文字サイズを変更、元々の設定でletter-spacing: の幅を変更していたのでletter-spacing: 0;でリセットしてli aに収まるように設定しました。

<div id="menu05">
<ul>
<li><a href="http://source-marine.net/css-mania">Home</a></li>
<li><a href="http://source-marine.net/cms/">CMS</a></li>
<li><a href="http://source-marine.net/source-branch/">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">HPのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>

#menu05 ul {

 width: 600px;
 margin-top: 2em;
 border-left: 1px solid #ccc;
}
#menu05 li {
 display: inline;
}
#menu05 li a {
 background: #ddd;
 width: 75px;
 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;
 font-size: 0.8em;
 letter-spacing: 0;
 color: #333;
}
#menu05 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}

<a title="ナビゲーションメニュー（応用編２サンプル）" href="http://source-marine.net/css-mania/sample080921 " target="_blank">サンプル</a>