リストタグでメニューを作るサンプル

区切りありのシンプルなメニュー

「display: inline-block;」とすることでリストタグを横並びにすることが可能。
また、「list-style: none;」とすることで、リストの先頭プレフィックスを非表示にすることが可能。

See the Pen navigation1 by yuichi (@yhamada1205) on CodePen.

ボタン風に横に並べたメニュー

「display: inline-block;」とした際に間に隙間ができてしまうが、「font-size: 0;」を入れることで隙間なく表示することができる。

See the Pen navigation2 by yuichi (@yhamada1205) on CodePen.

ボタン風に横に並べたメニュー（枠あり）

See the Pen navigation3 by yuichi (@yhamada1205) on CodePen.

2段になっているシンプルなメニュー

See the Pen navigation4 by yuichi (@yhamada1205) on CodePen.

タブ風なメニュー

折り返さずに、スクロールをする場合は「white-space:nowrap;」とする。
またスクロールバーを表示する場合は「overflow-x: scroll;」を設定する。

See the Pen navigation5 by yuichi (@yhamada1205) on CodePen.