スクリプトを使わずIE6でドロップダウンメニュー（っぽいもの）

あちこちのサイトで紹介されていたので、IE6でも出来ることは知ってたけれど
それでもサンプルのCSSファイルを見ても全く理解できず
displayのnoneとblockが鍵だなと、なんとなく思っていた。
しかし、displayではなくoverflowのhiddenで指定したサイズからはみ出した部分は表示させず
a:hoverのvisibleで表示させれば良いだけの話だった。
IE6ではa:hoverしか対応していないとの事なので、そのテキスト部分にボタンを並べてみた。

<style type="text/css">
    .test_menu a {
        position: absolute;
        overflow: hidden;
        height: 24px;
        cursor: default;
    }
    .test_menu a:hover {
        overflow: visible;
    }
    .test_menu input {
        width: 70px;
        height: 20px;
        font: 10pt;
    }
</style>
<!--   ↓bodyの部分   -->
<div class=test_menu>
    <a href="#aaa">
        <table>
            <tr><td><input type=button value=Menu></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
            <tr><td><input type=button value="Sub Menu"></td></tr>
        </table>
    </a>
</div>

※28日14時
書き換えた。
ダイアリーの設定と混ざるので、heightやtableのpaddigの数値が実際とは違う。
文字の大きさが中の環境で調整したけれど、やっぱ環境によってはズレるかな？