0

I have a menu that is dropping behind other elements - I have tried z-indexing on what I thought were the relevent parts, but to no avail -

Can anyone tell me what I need to do to make this dropdown be on top of other elements in IExplorer? Looks fine in FF, Chrome, Safari - thank you for your help

Beta testing site: http://bit.ly/Hb0RJz

HQCasanova
  • 1,158
  • 1
  • 10
  • 15
Promo
  • 43
  • 7
  • Link trying to redirect. Please adjust it. – Fallenreaper Oct 31 '13 at 18:44
  • @Fallenreaper - Looks like it redirects to https://beta.keepsakequilting.com/checkout/shoppingbag1021test.aspx . I got an expected SSL warning because the cert isn't explicitly for their `beta` subdomain. – admdrew Oct 31 '13 at 18:50

1 Answers1

0

Has to do with the stacking context of the elements. Since the two elements have different stacking contexts, z-index won't work. Take a look at this page.

Also answered here: IE7 dropdown menu appears behind image and CSS Dropdown menu hidden behind content IE7

Community
  • 1
  • 1
HQCasanova
  • 1,158
  • 1
  • 10
  • 15
  • Thank you very much -- I got it to work with your suggestion and now it drops over the other elements in IE, but I ended up with an issue I had prior to this (in all browsers) and had been fixed until I made this change. The sub menu is under the first menu now. If you look at this jsfiddle here: http://jsfiddle.net/keltoid/UPSba/ under Quilt Fabrics, the second level submenu is going UNDER the first again.. I've tried everything. Your fix of putting z-index:1 in Line 29 worked, as far as stack order in IE, but now you can see the sub menu is going under it.Can you see the issue? – Promo Nov 06 '13 at 19:14
  • Anyway. I'm pretty ticked off I had a halfway decent menu and have to screw it all up for internet explorer. Its the 21st century, I can't believe we still have to deal with this %$#@. I can't get it right now. I have tried EVERYTHING. Is there anyone who can help me? I've edited the jsfiddle -- and now its not what it was. So... I'm so sick of trying things that don't work. – Promo Nov 07 '13 at 17:30
  • @Promo Hey! I know what you mean. I was just answering you. I see the issue. I had a stab at it but couldn't quite manage to solve it. I think it has to do with the natural stacking order of the elements (as they appear in the DOM). If you find a way to modify the z-index of the `.column` elements to a value lower than the `.menu-container` being shown, you should be on the right track. But couldn't get any further than that. Sorry. – HQCasanova Nov 07 '13 at 17:37
  • Thanks hqcasanova - I appreciate the attempt -- I'll check it out again and see if I can get through all the stacking going on. :) – Promo Nov 11 '13 at 15:11