html - 隐藏在视频 css 后面的子菜单背景

Question

我的子菜单背景半径隐藏在视频后面。我已经尝试过“wmode=transparent”和 z-index 属性。但没有任何效果。如何解决这个问题？

html:

<ul>
  <li><a href="#">mainmenu</a>
    <ul>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
    </ul>
  </li>
</ul>
<iframe width="560" height="315" src="//www.youtube.com/v/v73Aj6XqHOg?wmode=transparent" wmode="transparent" frameborder="0" allowfullscreen></iframe>

CSS：

#nav li ul {
position:absolute; z-index:1000;
display:none; width:147px; padding:0px; margin:0px;
top:1.8em; background-color:#d1d1d1; 
border-bottom-left-radius: 10px 5px;
moz-border-bottom-left-radius: 10px 5px;
-webkit-border-bottom-left-radius: 10px 5px;
border-bottom-right-radius: 10px 5px; line-height:15px; padding-top:0px; padding-bottom:3px;
moz-border-bottom-right-radius: 10px 5px;
-webkit-border-bottom-right-radius: 10px 5px;

}

左图是错误，右图是需要的结果。有什么帮助吗？