PDA

View Full Version : Problem with iframe overlapping a javascript dropdown menu. Please help.



polaris
Sep 19th, 2009, 10:08 AM
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 javascript and css could be seen on 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!

polaris
Sep 20th, 2009, 02:32 AM
Anyone? :(

ckeyrouz
Sep 20th, 2009, 04:00 AM
In fact the menu is made from html code that exists in a certain frame.
And whatever you do you cannot make it display outside the context of the frame that contains it.

There might be several solutions.
Please give us a link to your site to see how we can help you.

bazz
Sep 20th, 2009, 04:32 AM
This is a bit of a guess but I seem to recall that you need to put the iframe inside a div and to use z-indez on that div as well as the div with the menu, to make the menu extend over the iframe.

hth

bazzof the menu and the iframe