アメブロカスタマイズ グローバルナビ

フリースペースに

<div id="navi"><a id="menu01" href="メニュー１のURL">メニュー１</a><a id="menu02" href="メニュー２のURL">メニュー２</a><a id="menu03" href="メニュー３のURL">メニュー３</a><a id="menu04" href="メニュー４のURL">メニュー４</a><a id="menu05" href="メニュー５のURL">メニュー５</a></div>


cssに


#navi {
position:absolute;
top:250px; /*-- ヘッダー画像との距離 --*/
margin-top: 20px;/*--上と下の間隔--*/
}
#menu01 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu01:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu02 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu02:hover {
background:url(マウスを載せたときの画像URL
) no-repeat;
}

#menu03 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu03:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu04 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu04:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu05 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu05:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu06 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu06:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}