CSSでロールオーバー

この上のブルーのナビゲーションボタンはJavaScriptを使わずCSSで背景画像を入れ替えロールオーバーするように作ってあります。

<!-- ここからメニュー部分始まり-->
<div id="menu">
<ul>
<li id="home"><a href="../index.html">ホーム</a></li>
<li id="top"><a href="../index.html">トップ</a></li>
<li id="gaiyo"><a href="../index.html">会社概要</a></li>
<li id="otoiawase"><a href="../index.html">お問い合わせ</a></li>
<li id="qa"><a href="../index.html">よくある質問</a></li>
</ul>
</div>
<!-- ここまでメニュー部分終わり-->

使用しているボタン画像
(マウスオフ・マウスオンの2種類のボタン画像を縦につなげて一枚の画像にして使っています、CSSでマウスオン時マウスオフ時に他の部分は見えないようにします)

menu部背景画像

このページの外部スタイルシート

ここからが本題です
上のメニューのようにJavaScriptを使わずにCSSで背景画像にa:hoverで画像を指定し本来のアンカーされたテキスト部分をインデントやposition等々で画面外へとばしたり見えないようにしたりするCSSナビゲーションを使った例を最近よく見かけます。
画面外に飛ばしたテキストは好きなようにかけると言うことです。

Googleの品質に関するガイドライン - 推奨という欄に「隠しテキストや隠しリンクを使用しない。」という一文があります。
この手法だと厳密に言うとスパム扱いになると思うのですがいかがなものでしょう。

JavaScriptの代わりにCSSでロールオーバー以外でも <h1>タグの背景にロゴ画像を入れ<h1>タグの中身はやはり見えないように外に飛ばすと言った方法もみかけます
見た目にこだわる事ができ、htmlも効果的にさわれるので<h1>タグの中にロゴ画像を置くよりも自然だというわけです。

たぶん直接ヘッダに記述すると何らかの影響があると思うのですがCSSを外部ファイル化してやればロボットは読めないと言うことのようですので具体的にペナルティを受けることはないだろうと思うのですがロボットが読めないからとか言ってやりすぎるはまずいと思うのですがさていかがなものなのでしょうか？

※2006/2/2訂正
外部CSSでもロボットは認識しているという事です、私の認識が間違っていたようですのでrobots.txtや.htaccess等で外部CSSは隠さないといけません

個人的にも一度検証してみたいところなのですがどうやって検証したらいいかちょっとアイデアが浮かびません。