<div id="nav">
  <ul>
    <li><a href="http://example.com/contact/">お問い合わせ</a> |</li>
    <li><a href="http://example.com/recruit/">採用情報</a> |</li>
    <li><a href="http://example.com/profile/">会社情報</a> |</li>
    <li><a href="http://example.com/sitemap/">サイトマップ</a> |</li>
    <li><a href="http://example.com/sitepolicy/">サイトポリシー</a></li>
  </ul>
</div>

<ul>
  <li><a href="http://example.com/contact/">お問い合わせ</a></li>
  <li><a href="http://example.com/recruit/">採用情報</a></li>
  <li><a href="http://example.com/sitemap/">会社情報</a></li>
  <li><a href="http://example.com/sitepolicy/">サイトマップ</a></li>
  <li><a href="http://example.com/privacypolicy/">サイトポリシー</a></li>
</ul>

div#nav {
  overflow: hidden; /* はみ出したものは隠す */
  _height: 1.5em; /* IE6用。祖先要素に幅や高さが指定していれば必要ないので，今回のサンプルではなくても問題なし。*/
}

ul {
  margin-left: -1px; /* 一番左のボーダー幅と同じ値の負のマージン */
}

li {
  padding: 0 10px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #fff; /* 区切り線 */
}

li {
  padding: 0 10px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #fff; /* 区切り線 */
}

li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}