透明のボックスにリンクを貼りたい

質問

背景に画像を置き、その上にハイパーリンクの掛かったボックスを重ねて、マウスーオーバーでリンクできるようにしたいです。
下の添付画像のようなイメージです。

アンカータグだとテキストを重ねることになるので、背景の画像を邪魔してしまいダメでした。
その他だとハイパーリンクを貼った透過画像を重ねる方法を思いつきましたが、
できれば高さを一定にした”リスト”などで容易に作れる方法があれば幸いです。

どのような方法がございますでしょうか？

回答No.2

LOHA

CSSでアンカータグにdisplay:blockと適宜width, heightを指定すれば、領域のある空のアンカーを作れるかと思います。
＃といいつつ、試してないので確信は持てないのですが…できるはずです。
透明画像などは要りません。配置はpositionなどを使って指定すればOKです。

他の方法としては、JavaScriptを利用してそれっぽいものを作ることもできます。
＃ただし、ステータスバーにアドレスが出る所謂「リンク」はアンカータグでしか実現できません。

お礼

htmlを以下のようにして

<div class="side_navi">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>

cssを以下のようにしました。

.a ul {
display:block;
position:absolute;
width: 190px;
}
.a li {
display:block;
list-style: none;
border-bottom: 1px solid #FFF;
width:190px;
height:39px;
float:left;
}
.a li a {
display:block;
color: #FFF;
text-decoration:none;
font-weight:bold;
height:39px;
width:190px;
}

IE以外のブラウザでは見れましたが、なぜかIEだけではリンクが有効になりませんでした。
どこに不具合があるのでしょうか？

補足

失礼しました
<div class="a">

としていました。
よろしくお願いいたします。