I have a design that I’m coding where the menu has another element which overlaps it slightly. This is fine, however, the menu has drop-downs and these drop-downs need to be on top of that other element while the menu is below. This goes beyond the limits of z-index as far as I know.
I spent several days just marinating the issue in my head and eventually came to the conclusion that I’d have to write a simpler no-js version and use jQuery to move things around to make it work when js is available. In this case the no-js version is greatly simplified, but still functional.
I’d love feedback on improving my method or ideas of other ways to do this. I’ve already built the actual site, but I’m going to write (and finish) a reduced set example on CodePen to illustrate the situation. I’ve written the HTML and CSS for it, I’ll add the jQuery to make it work as soon as I have time.
http://codepen.io/ryanburnette/pen/GiHba
