Resolving the conflict between the dropdown frame and the layer with an IFRAME

The author uses DW to make a pull-down menu, but hit the form list item to run below, please help to solve, please see the question Figure 1.

Figure 1 Page dropdown frame conflict with layer

Because the priority between the layer and the Drop-down box is: the dropdown box > layer, the above problem occurs because of the order of precedence in the display. (if several elements are layers, we can set it by the layer's Z-index property): Give the layer a higher priority than the dropdown box (IFRAME) to solve the problem! The specific resolution code is as follows:

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
<tr><td>item 3</td></tr>
<tr><td>item 4</td></tr>
<tr><td>item 5</td></tr>
</table>
<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>
<form>
<select><option>A form selection list</option></select>
</form>