Navigation sub menu issue in IE8

[yrsengar]

Hi guys,

I am have trouble in IE8 with submenus. Submenus is working fine in all browsers but in IE8 or below when i hover over the main menu, its sub menus appear behind other elements (like if its z-index is low)

[NZVisitors.co.nz](http://pro.yogeshsengar.com/activities.html “yogeshsengar.com/activities.html”)
(only destination menu have submenus)
I tried everything i could but so far no luck, any help would be greatly appreciated.

Thanks you

[strages]

mmh it looks like you’re fighting against yourself still within the css. I can see that from:

z-index: 10 !Important;

and

visibility: hidden;

That’s of course the whole challenge, finding out why something isn’t working. fixing it in a way that it works, then refining it.

apart from the fact that I would not use !important unless I cannot otherwise, there is also the problem of the visibility. Right now you’re hiding it from the view, but not the browser. So any content behind the hidden menu is not clickable ( say that there is a link over there ). use in that regard display:hidden;

the advice i can give you right now is locate the problem and create a simplified testcase using codepen.io. This way you will probably find a solution yourself as you’re cutting away all the noise, but also it will make a more effective forum post!

good luck :)

[Miller]

I think you should recreate nav from zero. I usually use something like

.nav>li {height: xx ; overflow:hidden;}
.nav>li:hover { overflow:visible; }

as I remember that worked fine with IE

[yrsengar]

I tried to created a simplified version of navigation menu from scratch and this time it was working perfectly fine in every browser.
Then i compared code of navigation menu i just created with the navigation menu of that website and found that the only difference was the z-index property.

– The simplified version of menu which i created from scratch for testing has a z-index property also for the header.
– And the menu on the website did not have z-index property applied to header.
Problem SOLVED :)

@Miller @Strages Thank you guys….

[Author]

Posts