[RESOLVED] Drop Down items appear behind image on screen

[webphotogeek]

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!

[danielshill]

Hi,

This should be related to z-index. Have you validated your markup?

[webphotogeek]

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.

[Eye for Video]

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:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.impressivewebs.com/a-deta...-css-property/
Best wishes,
Eye for Video

[captainscall]

yep, z-index. Something like this:

img
{
position:relative;
z-index:1;
}

.nav_dropdown
{
position: relative;
z-index: 2;
}
higher z-index = on top

[webphotogeek]

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');

http://turnkeyelite.com/menus

[Eye for Video]

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).
Start there..
EfV

[coderunner]

Hello webphotogeek,

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à !

your code

<iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0" frameborder="0" allowfullscreen></iframe>

new code

<iframe width="420" height="315" src="http://www.youtube.com/embed/8-iTSQgv9cQ?rel=0&wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>

Regards,
Coderunner

[webphotogeek]

That did it!

Thank you!!!

[coderunner]

Hello webphotogeek

You're welcome

Is it possible to mark this topic as "Resolved".
(menu bar above your nickname --> Thread Tools --> option: "Mark Thread Resolved")

[webphotogeek]

Sure