Position: fixed z-index bug with HTML5 Video Tag

I'm having a weird bug in Chrome where my fixed navigation dropdown menu is not appearing properly over an HTML5 video tag when hovered. If you check Firefox it is working totally fine, but Chrome seems to make it invisible while still clickable. I have tried multiple possible solutions from -webkit-backface-visibility on both dropdown and video as well as possible wmode=transparent attributes on old Flash/YouTube embed solutions, but nothing is working. Problems can be viewed at: http://spencerfink.net/capers/ NOTE: My nav and dropdown menus MUST be position: fixed to keep them constantly at the top of the page no matter where user scrolls. Position: absolute or relative changes on elements are not meeting my needs. The only way I can get the dropdown to appear in Chrome is by changing the #banner div containing the video to a z-index of -1, but that interferes with my Contact Us roll-up section at the bottom of the page and more z-index shuffling ends up detaching the navbar from its fixed position at the top of the page. This problem is also happening on pages with Owl Carousel, but I'd think solution is similar or identical. HTML of conflict area ``` <div id="navbar"> <a href="index.html"><img src="images/capers-logo.png" height="80px" width="115px"></a> <a href="index.html" id="capers">Creative<br></a> <ul id="nav"> <a href="index.html"><li>Home</li></a> <a href="our-work.html"><li id="dropdown">Our Work <div id="our-work"> <ul> <a href="marketing-landing.html"><li class="blue">Marketing</li></a> <a href="augmented-reality.html"><li id="blue">Augmented Reality</li></a> <a href="brand-development.html"><li id="blue">Brand Development</li></a> <a href="explainer-videos.html"><li id="blue">Explainer Videos</li></a> <a href="entertainment-landing.html"><li class="orange">Entertainment</li></a> <a href="animation.html"><li id="orange">Animation</li></a> <a href="games-apps.html"><li id="orange">Games/Apps</li></a> <a href="creative-design.html"><li id="orange">Creative Design</li></a> </ul> </div> </li></a> <a href="#"><li>News</li></a> <a href="contact-us.html"><li>Contact Us</li></a> </ul> <img id="mobile-icon" onClick="toggleMenu()" src="images/menu.png"> <div id="mobile-menu"> <ul> <a href="index.html" onClick="closeMenuLink()"><li>Home</li></a><br> <a href="our-work.html" onClick="closeMenuLink()"><li id="dropdown">Our Work</li></a><br> <a href="marketing-landing.html"><li class="blue">Marketing</li></a> <a href="entertainment-landing.html"><li class="orange">Entertainment</li></a> <a href="#" onClick="closeMenuLink()"><li>News</li></a><br> <a href="contact-us.html" onClick="closeMenuLink()"><li>Contact Us</li></a> </ul> </div> </div> <div id="banner"> <video id="video" autoplay preload="auto" poster="images/placeholder.jpg"> <source src="videos/placeholder.mp4" type="video/mp4"> <source src="videos/placeholder.webm" type="video/webm"> <source src="video/placeholder.ogv" type="video/ogg"> </video> <a href="marketing-landing.html"><div class="gradient-left" id="gradient-blue-left"></div></a> <a href="entertainment-landing.html"><div class="gradient-right" id="gradient-orange-right"></div></a> <a href="marketing-landing.html"><div id="arrow-left"><h2>Marketing</h2></div></a> <a href="entertainment-landing.html"><div id="arrow-right"><h2>Entertainment</h2></div></a> <a href="#scrolldown"> <div id="explore" class="green"> <h3>Explore</h3> <div id="arrow-down"></div> <div id="scrolldown"></div> </div> </a> ``` Related CSS ``` #navbar { position: fixed; overflow: hidden; top: 0; font-size: 1.15em; width: 100%; max-width: 100%; height: 80px; z-index: 3; background-color: rgba(0, 179, 188, .4); /*background-color: rgba(255, 255, 255, .8);*/ /*background-image: url(../images/navbar-tiki-pattern.png);*/ box-shadow: 0 2px 2px #555555; transition: .2s ease-out; } #navbar:after { background-image: url(../images/navbar-texture.jpg); background-size: cover; background-repeat: no-repeat; background-clip: border-box; position: fixed; width: 100%; max-width: 100%; height: 80px; overflow: hidden; top: 0; left: 0; opacity: .9; z-index: -1; content: ' '; transition: .2s ease-out; } #navbar ul { position: relative; list-style: none; display: inline-block; margin: -3px 0 0 0; padding-left: 0; } #navbar ul li { position: relative; list-style: none; text-decoration: none; display: inline-block; padding: 0 35px; margin-left: -4px; margin-top: 0; line-height: 86px; transition: .2s ease-out; opacity: 1; } #navbar ul a:first {padding: 0 40px 0 0;} #navbar ul li:hover { background-color: rgba(255, 255, 255, .95); opacity: 1; color: #7ccd05; line-height: 78px; border-top: 8px solid #7ccd05; } #navbar a { font-weight: bold; text-decoration: none; color: white; } #dropdown:hover a:first-child {color: #7ccd05 !important;} #dropdown:hover #our-work {height: 120px;} #our-work { position: fixed; top: 80px; width: 100%; background-color: rgba(255, 255, 255, .92); height: 0; overflow: hidden; z-index: 4; line-height: 40px; box-shadow: 0 2px 2px #555555; left: 0; transition: .3s ease-out; } #our-work ul { width: 100%; } #our-work ul li { position: relative; list-style: none; text-decoration: none; display: inline-block; text-align: center; border-right: 1px solid #eeeeee; border-bottom: .5px solid #eeeeee; padding: 15px 0 0 0; width: 24.95%; z-index: 3; min-width: 190px; height: 45px; line-height: 30px; transition: .2s ease-out; opacity: 1; } #banner { position: relative; background-color: white; text-align: center; top: 0px; margin-top: 80px; width: 100%; height: auto; z-index: 1; max-height: 1000px; background-position: center; background-attachment: fixed; /*background: #f5f6f6; /* Old browsers */ /*background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* FF3.6+ */ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */ /*background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */ /*background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Opera 11.10+ */ /*background: -ms-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* IE10+ */ /*background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */ } #banner img { width: 100%; height: auto; position: relative; top: 0; left: 0; } #banner video { width: 100%; height: auto; margin-top: -80px; position: relative; z-index: 0; top: 0; left: 0; } ``` Help greatly appreciated, I've been scouring the web for an answer!