Z-index and position problem 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 pretty new to this stuff I would love some wisdom.