Help! z-index doesn't work with dropdown menu and iframe

[polaris]

I used a simple javascript menu indicated on this website: http://javascript-array.com/scripts/simple_drop_down_menu/

My problem is that there is another page on our website that has an iframe and the drop-down menu appears underneath the iframe instead of above it.

I tried using z-index with insanely high numbers -999 for the iframe and 999 for the menu but still to no avail.

I am thinking that I might be putting the z-index in the wrong place. Could someone please advise me where to put the z-index in a drop-down menu with a structure like this (the whole structure with the script and css could be seen in the URL above)?

<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

On the iframe I used tried doing this:

<iframe src="#" height="700px" width="500px" frameborder="0" name="iframe1" style="position: absolute; z-index: -999;"></iframe>

I don't know where to put the z-index on the menu though (assuming I placed the z-index on the iframe correctly). Do I put it in the <li>? Or should I create a <div> around it and put it there?

Please help. I would really appreciate it. Thanks!