≡ Menu

Thesis 1.x – IE Z-Index Solution for Thesis multi-line nav with submenus

So lots of people are having issues with Thesis in IE7 and IE8 where subnav items appear beneath the other rows of the nav if their nav spans multiple rows.  Well I finally came up with a solution.

Basically you need to turn your menu into a sort of staircase where the top row has the highest z-index and the bottom row has the lowest.

This particular site’s nav was 4 rows deep.

I originally came up with the following code:

.custom .menu li.tab-1, .custom .menu li.tab-2, .custom .menu li.tab-3, .custom .menu li.tab-4, .custom .menu li.tab-5, .custom .menu li.tab-6 { z-index:4; }
.custom .menu li.tab-7, .custom .menu li.tab-8, .custom .menu li.tab-9, .custom .menu li.tab-10, .custom .menu li.tab-11 { z-index:3; }
.custom .menu li.tab-12, .custom .menu li.tab-13, .custom .menu li.tab-14, .custom .menu li.tab-15, .custom .menu li.tab-16 { z-index:2; }
.custom .menu li.tab-17, .custom .menu li.tab-18, .custom .menu li.tab-19, .custom .menu li.tab-20 { z-index:1; }

But I wasn’t happy with it because it requires changing a lot of code if you remove 1 menu item.

So I thought how can I simplify it and came up with this solution:

.custom .menu li:nth-of-type(n) { z-index:4; }
.custom .menu li:nth-of-type(n+7) { z-index:3; }
.custom .menu li:nth-of-type(n+12) { z-index:2; }
.custom .menu li:nth-of-type(n+17) { z-index:1; }

With the n+[number] the [number] is the position of the first menu element on the new row.
Fortunately Thesis gives each menu item a class called tab-[number] so you can easily figure out which element to use without counting manually.

If you want to see where I originally posted the solution you can find it on the diythemes forums: http://diythemes.com/forums/showthread.php?58289-z-index-problem-in-IE-for-top-nav&p=259547#post259547

Comments on this entry are closed.