グローバルメニュー

 

タイトル下に

<!-- ナビゲーションバー -->
<div id="menubar">
<ul>
<li><a href="リンクURL">ホーム</a></li>
<li><a href="リンクURL">ルアー</a></li>
<li><a href="リンクURL">ロッド</a></li>
<li><a href="リンクURL">メール</a></li>
</ul>
</div>

<!-- ナビゲーションバー下に余白を作る -->
<p>　</p>

ｃｓｓに

/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:60px;
}

<!-- メニューバー -->
#manubar{
width:100%; }
#menubar ul{
display:table;
width:100%;
margin: 0;
padding: 0;
background-color: #FFFFFF; }
#menubar li{
display: table-cell;
width:25%;
padding:0;
background-color: #000000; }
#menubar li a{
display: block;
margin:0 auto;
padding:6px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 20px; }
#menubar li a:hover{
background-color: #333333; }