styling elements in a nested list
I am having a lot of trouble with recreating a navigation and subNavigation that I once did before or at least understanding how I got it to work :blush:
In the main navigation of this html document, when one hovers over one of the main li's (about, groups, media, etc) the background position is changed so a different image shows to display that one is hovering on that anchor in that li.
Also when hovering on that link, a nested list appears. Now one can also hover over an li in the nested list (subNavigation) and upon doing so the text-decoration is set to underline.
However, also the on hover background position is kept to show that although one is not hovering on the main anchor, one is in the nested list that is a child of that anchor.
More simply, on hover of the parent anchor, it has a darker background image. On hover of the child and nested anchor, the child anchor is given an underline and the darker background image of the parent anchor is kept.
So I was obviously able to do this, but I can not figure out how I did so with only css and js.
I mean, how can I style the parent anchor (keep the on hover background position) when one is not acting upon or hovering over it.
It is in times like this that I wish I kept comments in my code :blush::lol:
I would really appreciate it if someone could help me understand how I did this in CSS and I hope I explained it well enough.
Please let me know if you have any Questions, Comments, or Concerns-- or if further or simpler explanation is needed:)
Thanks in Advance & Best Regards,
P.S. If you play around with the navigation and hover over each of the links and then hover over the sub (nested) links that appear underneath then that should help.
Here is the live example again.