用Iframe解决DIV显示问题

由于显示顺序决定;我们用DIV做菜单时,被select穿透
怎么解决呢?看代码吧!

<div id=menu style="DISPLAY: none; LEFT: 20px; WIDTH: 100px; POSITION: absolute; TOP: 20px; HEIGHT: 200px; BACKGROUND-COLOR: #6699cc">
<table>
    <tbody>
        <tr>
            <td onclick=javascript:alert();>item 1</td>
        </tr>
        <tr>
            <td onclick=javascript:alert();>item 2</td>
        </tr>
        <tr>
            <td onclick=javascript:alert();>item 3</td>
        </tr>
        <tr>
            <td onclick=javascript:alert();>item 4</td>
        </tr>
        <tr>
            <td onclick=javascript:alert();>item 5</td>
        </tr>
    </tbody>
</table>
<!--关键所在--!>
<iframe style="Z-INDEX: -1; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; VISIBILITY: inherit; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 500px" src="javascript:false"></iframe>

</div>

<p><a onclick="document.getElementById('menu').style.display=''" href="/victor136/admin/EditPosts.aspx#">menu</a>
<form>
    <select>
    <option selected>A form selection list</option>
    </select><br><br><br><select id=Select1 name=Select1>
    <option selected>A form selection list</option>
    </select><br><br><br><select id=Select2 name=Select2>
    <option selected>A form selection list</option>
    </select><br><br><br><select id=Select3 name=Select3>
    <option selected>A form selection list</option>
    </select><br><br><br><select id=Select4 name=Select1>
    <option selected>A form selection list</option>
    </select><br><br><br><select id=Select5 name=Select2>
    <option selected>A form selection list</option>
    </select>
</form>