I have been working on a new CSS Dropdown menu using some free code over from Alist Apart. You should see the updated dropdown menus right here on Zedomax.com real soon when I am done tinkering with it.
Well, I ran into a problem while developing these CSS dropdown menus, the menus would display “under” the Google Adsense ads, which are basically iframes.
I kept googling for some solutions but there was really no clear answer out there but I found that you can easily do this by using “Z-index“, which is a CSS property that lets you position a DIV over iframes.
One point is that you need to make sure to use a “position:absolute” or “position:relative” along with the z-index, otherwise it won’t work.
I simply added the following 2 lines to where I wanted to display my CSS dropdown menus over Google Adsense iframes. (It will depend where you put it, it could be ul, li, ul li, or even ul li ul depending on how you have your CSS menus set up.
position:absolute;
z-index: 10;
Here, I set z-index to 10 to make sure there no other z-indexes higher than that. You can also set the z-index to a negative number by the way.
I am sure some of you will run into this same problem so I hope this helps you figure it out!
*UPDATE – I found that when you put it under the children, it will work in Firefox but not in IE. To get it working in IE, put position:relative and z-index on your parent ul.
For example, do this:
.catbar ul {
position:relative;
z-index:10;
}
You will need to position your parent ul as relative but declare your child ul as absolute and you can make it work in IE.
One Response to CSS Hack – How to Display CSS Dropdown Menus Over iFrames!
Leave a Reply
Bakwaas Solution!