Estou tentando implementar um menu de navegação suspensa multinível horizontal. Imediatamente abaixo (verticalmente) do menu, tenho um vídeo do YouTube incorporado via iframe. Se eu passar o mouse sobre um dos itens de navegação de nível principal no Firefox, o menu suspenso aparecerá corretamente na parte superior do vídeo.
No Chrome e IE9, no entanto, apenas uma parte da lista suspensa é visível na pequena região de espaço que tenho entre o menu e o iframe. O resto parece estar por trás do iframe.
O problema parece estar relacionado ao vídeo do YouTube, não ao iframe. Para testar, direcionei o iframe para outro site, e não para o vídeo, e o menu suspenso funcionou bem, mesmo no IE.
- Pergunta 1: WTF?
- Pergunta 2: Por que, mesmo se eu explicitar
z-index:-999 !important;
o iframe, esse problema ainda ocorre?
Existe algum CSS interno que o código de incorporação do YouTube inclua que de alguma forma substitua as coisas?
<embed wmode="transparent" ...>
seção é tudo que você precisa (pelo menos no firefox) e não há necessidade de se preocupar com a configuração wmode em url
's param
' s ou iframe
s