HTMLはそのままで、CSSで楽しいメニューバーを作ってみました。
●追加
a:link { display: block; width: 200px }
幅200pxのブロックにする。
●追加
background-color: #06c;
border-top: 1px solid #69f;
border-bottom: 1px solid #036;
背景色を青にして、上下に1pxのラインをいれる。
●追加
color: #fff;
text-decoration: none;
padding-left: 15px;
フォントの色を白にして、左内側に余白を15px。
(注:200px指定のブロックですが、余白15px分広くなり実際には215pxになります。)
●追加
background-image: url("chara_03.gif");
background-repeat: no-repeat;
background-position: 180px 0;
padding-top: 5px;
padding-bottom: 5px;
背景180pxの位置に画像を配置し、文字の上下内側に5pxの余白をつける。
●追加
background-position: 180px 50%;
背景画像の縦位置の調整をする。
●追加
a:hover
背景画像とブロックの色を変える。
(マウスオーバーで当社キャラ「ジョン=熊」が「五郎=犬」になる。)