Drop Down menu disappears when hovering over video?

[m00ch0]

I've embedded a HTML5 video with workarounds for most browsers into one of my latest websites but when ever the CSS drop down menu hovers over the video you cant select the drop down menus

Use the link below and goto "Methodology" then onto "Justification" and you'll see what I mean


http://www.webtoucan.com/fts/hospital_ats.html

Any ideas would be helpful.

This is the video code

<video width="425" height="350" controls autoplay>
<source src="video/tier_3_auto_transfer_systemm.avi" type="video/avi">
<source src="video/tier_3_auto_transfer_system.mp4" type="video/mp4">
<source src="video/tier_3_auto_transfer_system.webm" type="video/webm">
<object data="video/tier_3_auto_transfer_system" width="425" height="350">
<embed width="425" height="350" src="video/tier_3_auto_transfer_system.swf"> </embed>
</object>
</video>

Please bare in mind all videos havent been created I'm trying to sort this problem first

 

[m00ch0]

Works fine here in FF21. Which browser are you using?

Chrome Version 27.0.1453.116 m

I should make the move to FF but loads of my bookmarks are here

 

[m00ch0]

Add z-index: 1 to class black_line_top in your css.

And then you'll want to put your social icons in a container and give those a higher z-index too as you'll notice they're now behind your black line.

You are my hero for today! been on that an hour its been driving me mad!

Thanks so much!