jquery - z-index 和 iframe 问题 - 下拉菜单

Question

嘿。我的下拉菜单和 iframe 有一个相当令人费解的问题。

我已将 1000 的 z 索引应用于下拉菜单，但是包含 YouTube 视频的 iframe 仍然出现在菜单上方。请自行查看以下内容(检查“短代码”菜单):

http://www.matthewruddy.com/demo/?page_id=765

我不明白这是为什么。谁能帮我吗？如果有帮助的话，这是 CSS:

#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}

#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}

#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}

#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}

#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000;
padding: 5px 0;
-moz-box-shadow: 1px 2px 3px #a4a4a4;
-webkit-box-shadow: 1px 2px 3px #a4a4a4;
box-shadow: 1px 2px 3px #a4a4a4;
}

#jquery-dropdown ul li ul li {
margin: 0;
padding: 0;
float: none;
position: relative;
z-index: 1000;
}

#jquery-dropdown ul li ul li a {
width: 180px;
padding: 10px;
z-index: 1000;
}

#jquery-dropdown ul li ul li a:hover {
background: #e0e0e0;
}

Answer 1

如果您想继续使用嵌入 Youtube 视频的 iframe 方法，只需通过查询变量 ?wmode=transparent 设置 WMODE 即可。这是一个例子:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe>

会变成:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe>

请记住检查 Youtube URL 中是否存在任何已存在的查询变量。如果已经有 ?something... 将 ?wmode=transparent 更改为 &wmode=transparent 并将其粘在末尾。