Hello Karl,
Thanks for your reply.
I have been trying to avoid using classes here, using direct child selectors instead. Maybe that's
ill advised?
It would appear that when I hover 'ul > li > ul' it's also selecting 'ul > li > ul > li > ul'. which
I thought it should not. That's the only way I can account for both transitions being started by one
hover (though it doesn't explain why they appear to be sequential rather than simultaneous).
I'll have a re-think and apply some classes.
Tim
On 15/10/2018 21:00, Karl DeSaulniers wrote:
Hi Tim,
Have you tried duplicating the CSS declaration that works for the second tier
and give it a different class name then apply that class to the third and
remove the class name that's associated with the second?
HTH,
Best,
Karl
Sent from losPhone
On Oct 15, 2018, at 9:04 AM, Tim Dawson <t...@ramasaig.com> wrote:
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/
______________________________________________________________________
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/
--
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/
