IE and z-index trouble

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!


I'm trying to adapt menu code found here /

I'm trying to do is have a combination of horizontal and tab menu, so
given a menu like this.

<ul id="nav">

On start, this is just the usual horizontal drop down menu.  However,
once he user in in the "Fruits" or "Oranges" section, I want the "Fruits"
menu to expand out below the main menu and stays there

[*Fruits* Veggies]
[Apples *Oranges*]

This is like your typical categories/subcategories tabs/subtabs
naviagtion.  I still want the veggies menu to drop down as I hover over

I have this somewhat working.  My problem is when I hover over veggies,
the drop down mmenu is displayed behind [Apples Oranges].  I added

 z-index: 6000;

to the drop down <ul> (no other z-index specified) and this works for
Opera and Firefox but not IE7 (haven't tested IE6).  What is the quirk
here and what is the workaround?  Thanks.

Site Timeline