最新ブラウザで利用できるCSS3 flexbox を利用した、ナビゲーションメニューのサンプルを作成しました。

・メニューは均等配置になります。

・リンクテキストが複数行になっても、要素の縦方向センター揃えになるようになっています。

Flexbox ナビゲーションメニュのサンプル

まずは html から。Bootstrap 3.x に配置した場合

<div class="container">
 <div class="row">
 <div class="col-sm-12">
 <ul class="test">
 <li><a href="">メニュー１</a></li>
 <li><a href="">メニュー2メニュー２</a></li>
 <li><a href="">メニュー３メニュー３メニュー３</a></li>
 <li><a href="">メニュー４</a></li>
 <li><a href="">メニュー５</a></li>
 <li><a href="">メニュー６</a></li>
 </ul>
 </div>
 </div>
</div>

続いて CSS 。
リンク<a> を display:inline-flex; にすることで、縦方向センター揃えを実現しています。

<style>
 .test{
 margin: 0;
 padding: 0;
 list-style: none;
 width: 100%;
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-around;
 align-items: stretch;
 }
 .test li {
 width:100%;
 border-left:solid 1px #ededed;
 }
 .test li:last-child {
 width:100%;
 border-right:solid 1px #ededed;
 }
 
 .test li a{
 display:inline-flex;
 width: 100%;
 height: 100%;
 align-items: center;
 justify-content: center;
 padding:10px 6px;
 transition: ease 0.2s;
 }
 
 .test li a:hover {
 text-decoration: none;
 background:#666;
 color: #fff;
 }
</style>