|
Posted by darius on February 27, 2008, 5:54 pm
Please log in for more thread options
Hello
I'm trying to adapt menu code found here
http://qrayg.com/learn/code/cssmenus/
I'm trying to do is have a combination of horizontal and tab menu, so
given a menu like this.
<ul id="nav">
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>Veggies
<ul>
<li>Carrots</li>
<li>Lettuce</li>
</ul>
</li>
</ul>
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
it.
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.
|