floatでなくinline-blockを使って横並びにすると、HTMLの改行コードがスペースとして表示されてタブ間に隙間ができてしまうので、 ここでは

<ul>
<li><a href="#">ホームページ</a></li><!--
--><li>リスト</li><!--
.....
</ul>

のように、改行をコメント記号で挟んだ。

他にも、

div#menu ul {letter-spacing : -0.4em; }
div#menu li {letter-spacing : normal; }

とする方法もあるらしい。

４辺ともボーダー1pxのタブを横に並べすると隣り合ったタブの境界が2pxの線になるのは、ここでは

#menu li{ margin-left : -1px; }

で対応した。

他にも、
div#menu li{border-right:1px;border-top:1px;border-bottom:1px;}
div#menu li:first-child{border-left:1px;}
としても良いかもしれない。