css Hover keeps disappearing and going behind iframe? - html

Question

I suppose I really have two questions(viewing the website might offer a better explanation):
The iframe on my website is staying in front of everything else, despite changing the z-index and setting the wmode to "transparent". I can't really find anything else about what might be causing it?
<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%;
}
The other problem is that my sub menus keep disappearing, while you're hovered over them. I've again tried playing with the z-index to no avail.
<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 for the menu:
.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;
}
Any and all help is greatly appreciated!

Answer 1

I think the following solution may solve both of your problems.
I've redesigned the layout, creating a wrapper to wrap both header and content
.wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
margin:0 auto;
position:relative;
overflow:hidden;
}
and then arranged navigation menu (of course, you can still use your current solution, if you like it!)
<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>
I've also fixed some imprecisions about video wrapper
.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%;
}
Fiddle
The navigation menu is now always on top, with a fixed position, and above video iframe.