Ok I've built this page that has drop down menus generated via an UL
using CSS only (except for IE which I used a bit of JavaScript code).
the menu looks something like this when rendered:
root item 1 | root item 2 | root item 3| root item 4 | root item 5 |
ect.
Quote:
sub item 1 |
sub item 2 |------------------
sub item 3 || sub sub item 1 |
sub item 4 || sub sub item 2 |
sub item 5 || sub sub item 3 |
--------------| sub sub item 4 |
|
------------------
Everything works great, until I got the bright idea that if you say on
sub sub item 3 of sub item 2 of root item 2 (or grater), that using
CSS I have the sub menu of root item 2 (or greater) repositioned to
the left side of screen so its alway visible when on a page that falls
under root item 2 (or greater).
The problem is if some one pops open root item 1 menu that the menu
apears behind root item 2 (which is now visible and positioned on the
left). So I figured ok I will set the LI block of root Item to
z-index:1; and every root item 2 and above to z-index:0;
this actually fixes the problem in Mozilla 1.x, Firefox, and MSIE 5.x.
But Opera 7.x it doesn't work, its still positioning root item 1
bellow root item 2.
So then I thought ok maybe Opera is correct and you can't apply
z-index to relatively positioned blocks, which is the case on the LI
that contain the root item.
So since the UL that is the child of the LI root item is Absolutely
positioned, I set the z-index on that instead.
Well that seemed to do the trick, until one tries to pop out the third
level on the pop out menu. Once you move your mouse to access the sub
sub items, it closes the menu.
So I guess the bottom line is, can z-index only be applied to
absolutely positioned items? or can it also be applied on relatively
positioned items?
and secondly is any one aware of a work around? That has run into this
before?
sincerely,
The Master