googleの検索メニューのCSSが知りたい

質問

googleの検索結果の左カラムのメニューに、すべて、画像、動画、ニュース…などといったボタンがありますよね。
http://www.google.com/search?q=htmlの左側にある、カーソルを載せると灰色の背景になるものです。
・onmouseoverで背景が四角く灰色になる。
・画像でなくテキストで、背景の色を切り替えている

このデザインが気に入ったので全く同じものを作ってみようと思ったのですが、どうもうまくできません。
ソースコードを見ても、

<div id="leftnav" role="navigation" style="position: absolute; top: 1px; width: 175px;" onclick="google.srp&amp;&amp;google.srp.qs(event)"><div id="ms"><ul>
<li class="mitem">
<a href="/search?q=html" class="kl">
<span class="micon" style="background-position: -40px -132px;"></span>画像
</a>
</li>
：
：
</ul>
<a href="#" id="showmodes" class="jsb nj kl" onclick="google.x(this.id,function(){
google.srp.toggleModes()}

);google.log('', '\x26ved\x3d0CBMQ_gU' +'&amp;ei=' + google.kEI);return false" style="padding-left: 16px;">
<span class="micon"></span>
<span class="msm">もっと見る</span>
<span class="msl">隠す</span>
</a>
</div>
<div class="lnsep">
</div>

と書かれており、私の現在の能力では理解できません。

どなたかこれと同じようなメニューを表示することができるコードのお手本を教えてもらえませんか。
どうかよろしくお願いします。

回答No.1

春原 なの（@ymda） · ベストアンサー

ものすごく単純にやるとしたら・・・

a:hover {
color:#215dc6;
background-color:#CCDDEE;
text-decoration:underline;
}

あたりでできると思います。

＃色、デザインは全く異なります。

その他、CSS hover で検索すると色々なものが
検索できると思います。

googleのHTMLソースコードを見ても、
「hover」で検索すると、いくつかひっかかるみたいですね。

＃ただ、CSSやJavaScriptが圧縮されていて、非常にみにくいですが・・・

お礼

ありがとうございます。
＞その他、CSS hover で検索すると色々なものが
検索できると思います。

これは初耳でした。教えていただき本当にありがとうございました。