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
　背景画像とブロックの色を変える。
　（マウスオーバーで当社キャラ「ジョン＝熊」が「五郎＝犬」になる。）