Z-index and position issue beyond CSS

Hey guys, I am having worlds of trouble trying to figure out how to get my navigation sub-menu's to not get cut-off by the main content wrapper. The parent theme I'm using is called Scrollider and is designed to cover up all the divs above it when the user scrolls. Its a great theme but I want those sub-menus to be on top no matter what. I got some help from a guy on another forum and he was able to get it to work in firefox with just changes to the css and adding/removing z-index to certain divs. It did not work on webkit browsers such as chrome however. He said the issue is that chrome creates a new stacking context when element "position: fixed" is used. He gave me an example of how it could be done with changes to both html and css, but I just cant put the puzzle together. The link to the other forum and our discussion is "http://stackoverflow.com/questions/15619797/z-index-on-home-page-navigation". The url to the site I'm working on is "www.kuhnflyfish.com". If you hover on a navigation item with a drop down and then scroll down you will see how the content wrapper overlaps it. If anyone can show me how to fix this I would be so appreciative. I'm still a novice and I would love some wisdom.

Thanks,
Mark

 

So 'wrapper' should be z-inexed on 0 and 'col-full' should be z-indexed on 0 as well.
Than try z-index 'sub-menu' on 10000 !important;

But I dont think its gonna work because you want overlap header with content which content must to be z-indexed with heighter number than header.

 

Oh...man. You're css is pretty wild. The overall codes can be simplified and optimized, that's why when you have problems like this, it's pretty hard to figure out which and which.

My opinion is this;
1 - Remove all z-index that you have.
2- Apply a z-index:2 to the #header, then apply z-index:1 to #wrapper,
3- or maybe instead of applying it to #header, try applying it to .col-ful

Your website is simple, yet the complexity of its codes is way beyond comprehension. If I were you, I'd trash it and do a proper rewrite.

 

Yeah something similar to that worked for firefox and IE, but not webkit browsers.

 

Oh.
In order for webkit browsers to read z-index, position is required, therefore;

* {position:relative}

(put it in your css)