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

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

我已将 1000 的 z-index 应用于下拉菜单，但是包含 youtube 视频的 iframe 仍然出现在菜单上方。请自行查看下面（检查“简码”菜单）：

http://www.matthewruddy.com/demo/?page_id=765 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;
}

如果您想继续使用iframe嵌入 Youtube 视频的方法，您可以简单地通过查询变量设置 MODE?wmode=transparent。这是一个例子：

<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... change ?wmode=transparent to &wmode=transparent并将其钉在末端。