[RESOLVED] Drop Down items appear behind image on screen
I created a CSS drop down menu, but the images in the HTML interfere with the menu. The drop down items fall behind the image. If anyone can tell me how I can make the items appear over the image, it would be appreciated.
It happens in IE and Chrome, but not in Firefox or Safari.
Here is the link: http://turnkeyelite.com/menus. Mouse over All About SEO to see the drop down. It falls behind the video image.
Thanks for any help!
This should be related to z-index. Have you validated your markup?
I thought z-index only works with CSS components? The CSS drop-down falls behind an image in HTML format using the <img src > tag.
It's the menu drop-down content that needs to have a higher z-index applied to it... not the image.
And remember, for z-indexing to work, the element must also have a declared position.
More info here:
Eye for Video
yep, z-index. Something like this:
higher z-index = on top
The image is not really an image, it is actually a youtube video. How would I declare that in the CSS. I can't use the standard rule for images e.g. background-image:url('paper.gif');
You don't need to apply any z-index to the image or the video... by default all HTML elements start out at z-index level 0.
Just give your menu content a z-index higher than the default (z-index:10 for example).
You don't have to change anything at all in your css.
Add &wmode=transparent to the youtube hyperlink and add wmode="Opaque" in the iframe tag, et voilą !
<iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0&wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
That did it!
Is it possible to mark this topic as "Resolved".
(menu bar above your nickname --> Thread Tools --> option: "Mark Thread Resolved")
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)