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/
