CSSテクニックコミュのボタン風にしたリンクについて。

初めて書きこまさせて頂きます。

CSSを使ってサイトリニューアルしようと試み，様々なサイトを参考にして以下のようなボタン風リンクを作ってみました。

http://yukashi.odap.jp/test.html

---------------------------------
css
--------
ul a {
font-weight:bold;
display:block;
width:8em;
padding:0.1em;
background:#6666FF; color:#FFFFFF;
text-decoration:none;
}
ul a span {
display:block;
float:left;
width:5em;
padding-right:0.1em;
margin-right:0.1em;
background:#FFFFFF;
color:#6666FF;
text-align:right;
}
ul a:hover {
background:#666666; color:#CCCCCC;
}
ul a:hover span {
background:#CCCCCC; color:#333333;
}
li{list-style-type:none; margin:1em;}

---------
html
---------
<ul>
<li><a href="test02.html">メニュー01</a></li>
<li><a href="test02.html">メニュー02</a></li>
<li><a href="test02.html">メニュー03</a></li>
<li><a href="test02.html">メニュー04</a></li>
</ul>

--------------------------------------

ブロック要素にみせかけたり，回り込みをさせたり，spanで装飾目的だけのマークアップをしたりとかなりの力技になっているんですが，これって記述などで問題はないのでしょうか？

IE,Firefox,Operaでは僕の意図どおりに表現されるんですが，MacIEやSafariなどはどうなるのかが不安で…。
メニューがちゃんと表示されないなんてシャレにならないので。

ご意見を頂ければと思います。
ではでは。