画像ボタンのマウスオーバーで、下にサブメニューボタン（画像）を表示させたいのですが、どうしたら良いでしょうか？（サンプル画像参照）

ページの配置はセンターで、メニューボタンはCSSによってレイアウトしております。
更新作業で、1つのボタンのみメニュー表示するため、あまりHTMLを変更せずに出来ますでしょうか？（多少はOK）

ちなみにこのボタンのCSSは
#navi li {
margin-top: 1px;
display: inline;
float: left;
}

HTMLのソースは
<ul id="navi">
<li><img src="img/navi_home_off.gif" alt="ホーム" width="92" height="31" /></li>
<li><a href="./kensaku/index.php"><img src="img/navi_kensaku.gif" alt="オフィス検索" width="103" height="31" /></a></li>
<li><a href="./souba/index.php"><img src="img/navi_souba.gif" alt="賃料相場データ" width="118" height="31" /></a></li>
<li><a href="./shinchiku/index.php"><img src="img/navi_shinchiku.gif" alt="推奨物件" width="87" height="31" /></a></li>
〜省略〜
<li><a href="./saiyou/index.php"><img src="img/navi_saiyou.gif" alt="採用情報" width="102" height="31" /></a></li>
</ul>
となっております。

どうかお知恵をお貸しください。宜しくお願いします。