IE8 position fixed with position absolute inside overflow issue
css, internet-explorer-8
Solution
So I worked out that it was some bug occuring. I had a z-index on the megamenu to it would appear over other elements on the page. If I removed that it worked. But I needed that on there so I looked a bit deeper and found that IE 9 and under hated the fixed menu and a gradient filter I had applied on the navigation background. I changed that to a regular colour and it fixed everything.
Problem
I've been working on a sticky menu which has a megamenu dropdown inside. When the user loads the page the navigation is static. The navigation is similar to the following. ``` <div class='navigation'> <ul> <li><a href="">Home</a></li> <li> <a href="">About</a> <div class='megamenu'>Megamenu</div> </li> </ul> ``` No the megamenu is position absolute and left:-9999px; on load; When the user scrolls past the navigation I change the postion to fixed; Which seems to work fine in all browsers. The issue I'm having is that in IE8 the navigation seems to have overflow hidden because the part of the megamenu that goes outside the navigation gets clipped off. I've tried setting z-index on everything and overflow visible with no luck. Thanks