嘿.我的下拉菜单和iframe有一个相当令人费解的问题.
我已将z-index 1000应用于下拉菜单,但包含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;
- }
解决方法
我会使用< object>来嵌入youtube视频.标签而不是iframe.然后,我会使用< param name =“wmode”value =“transparent”>在< object>内像这样的东西:
- <object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>