I am trying to create a three-level menu where the second tier drops down when you hover on an item
in the first, and the third (if present) appears on the right of the drop-down when you hover on an
item in that drop-down.
I'm using a transform so that the elements appear gradually. It's all very old hat, and I'd expected
it to be straightforward. But I'm having a problem because the transform for the third tier is being
triggered at the same time as that for the second. The effect is that when you hover on a first
level element both the second and third tiers appear (although the third tier is in the wrong place
until you hover the second.
There's an example of doing this for a two-level menu in Eric Meyer's 'CSS Definitive Guide' (4th
Edition p. 857) which works perfectly, and I've tried to adapt it for a third.
I've posted a reduced example at: https://jsfiddle.net/ramasaig/dcpu1veg/
It looks as if the two transforms are sequential, but both are triggered by the hover at level one.
I can't work out why. I thought it might be because on load the levels are all stacked up under
level one, so hovering on level one is also hovering on level two. I've tried giving level two a
start position well off screen, but this doesn't seem to solve the problem.
Any suggestions, please?
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
