iframe z-index dropdown menu

Question

Due to the structure of my website, i am forced to use a iframe to display the dropdown menu html file. if not, I am not able to see the dropdown in IE. Here is the code I am using.

<iframe id="a"name="FRAMENAME" src="http://website.com/dropdown.html" width="1000" style="position:relative" background="#F3F0ED" style="z-index:10000" height="40" frameborder="0" scrolling="no" allowautotransparency=true></iframe>

Now the problem is that the dropdown is hiding behind the other images on the website. I have specified position:relative and z-index:10000 but i cannot get it to overlap on the images. The z-index of these images is much less than 10000. Any suggestions please?

Answer 1

if your images are outside of your iFrame, of course your dropdown menu will not show up since you are trying to tell the dropdown menu to go out of its windows. iframe is a different window inside your html, therefore any overflow of the window will never go out, elements inside the iframe is not affected with the z-index.

what you could do is, if your http://website.com/dropdown.html has the dropdown content only, you can call it by jQuery

<div id="myDropDown">
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#myDropDown").load("http://website.com/dropdown.html");
    });    
</script>

this will append the content of your dropdown.html into the div