I have been working on a drop down menu, that has different colors for both parent and child, which change when in a hover state:
I have a small quirk with this though.
The Home link is fine as are the Products and Section2 are fine when not hovered.
The problem is:
1) When I hover over Product, the color of the link needs to be white. (BG color is fine and working correctly)
2) When I hover over a child element, such as Product1, then Products link color needs to be white
Hovering between Products and Section2 seems to be quite quirky. Sometimes the color is white, sometimes it is grey (#777)
Is there a way around this?
Thanks
That’s no quirk, that is how your code works.
The color-definitions in your javascript are applied as inline-style which is higher than then normal css-style. This applies the grey color and leads to the quirk. Why do you have javascript there anyways?
edit:
I edited your fiddle to how I suppose you want it to behave. I just moved the color-declaration from the
ato the parentliwhile giving theacolor:inherit.http://jsfiddle.net/cELJ6/2/