css 悬停不断消失并落后于 iframe

Question

我想我真的有两个问题（查看网站可能会提供更好的解释）：

我网站上的 iframe 保持领先于其他一切，尽管更改了 z 索引并将 wmode 设置为"透明"。我真的找不到任何其他关于可能导致它的原因？

<div class="videoWrapper">
        <iframe position="absolute" width="100%" height="100%" src='http://www.pinkbike.com/v/embed/300624/?colors=ffae00' allowfullscreen wmode="transparent" frameborder='0'></iframe>
    </div>

.CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 40%;
    margin-left:58%;
    margin-top:2%;
}

另一个问题是，当您将鼠标悬停在子菜单上时，我的子菜单不断消失。我再次尝试使用 z 索引无济于事。

<div id="menu_container">
<div class="menu_item" id="item_one">
    <a class="menu_item" href="#"><h3>Downhill</h3></a>
    <div class="sub_menu_item" id="item_one_sub">
        <h4>Gallery</h4>
        <h4>Example</h4>
        <h4>Example</h4>
    </div>
</div>
</div>

菜单的 CSS：

.menu_item {
  color:white;
  position:absoloute;
  height:3%;
  width:25%;
  text-decoration:none;
  text-align:center;
  margin-top:-20px;
  z-index:2;
  }
.sub_menu_item {
   background-color:black;
   display:none;
   position:absoloute;
   text-align:center;
   width:100%;
   z-index:5;
}
#menu_container {
    position:fixed;
    width:79%;
    min-width:500px;
    height:30px;
    background-color:orange;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
}
#item_one_sub {
    height:auto;
    margin-top:-20px;
    text-align:center;
}
#item_one:hover   #item_one_sub {
    display:block;
    z-index:100;
}

非常感谢任何和所有的帮助！

Answer 1

我认为以下解决方案可以解决您的两个问题。

我重新设计了布局，创建了一个包装器来包装标题和内容

.wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 80%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

然后安排导航菜单（当然，如果您喜欢，您仍然可以使用当前的解决方案！

<div class="navitem">
    <div class="title">Item one</div>
    <div class="submenu">
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
    </div>
</div>

我还修复了有关视频包装器的一些不精确

性

.videoWrapper {
    width:100%;
    display:block;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

小提琴

导航菜单现在始终位于顶部，具有固定位置，并且位于视频 iframe 上方。