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