Styling elements in a nested list

Hi guys,
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,
Team 1504.

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.

Your top row is a list. You have assigned css to li:hover (note: NOT <a>, but <li>!), so it changes background image and shows second row.

When your mouse is over second row, it is still over that <li> from top row because your second row is a list inside that <li>, so li:hover is being shown.

Oh okay. So its When the li is hovered on. So what would be the css syntax for keeping the on hover bg position when one is hoverig on the second/nested/underneath row?

Thank you btw, I really appreciate it. :slight_smile:

This rule here, for example:

nav ul [COLOR="Red"]li#dpn-outreach:hover[/COLOR] a, nav ul li#dpn-outreachover a {
  background-position: -412px -38px;
}

It’s saying “when that LI is hovered, make the <a> a certain style”.

You are confusing the structure a little. :slight_smile: The second list below is still part of the top list. It’s not a separate element.

As others have already said:


nav ul [COLOR=Red]li#dpn-outreach:hover[/COLOR] a

The above rule applies to all anchors while the list item is hovered. That includes the top level item and all the anchors in the sublist.

Therefore you would follow immediately with another rule that wuold set the nested list anchors back to default and then finally another rule to change the nested link anchors when hovered.

It’s a three stage process.

e.g.

li:hover a{background:red}/* style main level anchor*/
li:hover li a{background:blue}/* nested nested anchor to default*/
li:hover li a:hover{background:green}/* nested anchor hover colour*/

Remember that the subnav is part of the parent list and not a separate element so all the time you hover on the parent you are automatically still hovering the parent even when on the sublist.

I appreciate all your guys’ help :slight_smile:

Ahh okay. At first when I read it I thought you were saying
x:hover, y
means when x is hovered on style y accordingly. Which complete confused me because I thought that , was essentially an ‘and’.
But now that I am quoting you, I realise what you mean how on hover of the li all the anchor’s inside it are styled accordingly and that the comma just ensures the styling to a specific anchor.

If that confused anyone-- long story short, I understand what ralph meant. , is an and for selectors in css and adding the hover pseudo-class to one of the parent elements means that any child elements written next in the series of selectors is only styled when the parent is hovered on :slight_smile:

i considered that because on reading the html, I saw that the nested list is inside and one could style the parent when the child is hovered on because the child is within the parent.
But I must have wrote it wrong as I gave up on that idea.

It’s a three stage process.

e.g.

li:hover a{background:red}/* style main level anchor*/
li:hover li a{background:blue}/* nested nested anchor to default*/
li:hover li a:hover{background:green}/* nested anchor hover colour*/

Ahh okay, thank you for explaining the 3 step process. Now that I think about it, sometimes I forget that when a machine / browser processes this, it happens essentially instantaneously to the point where it seems like one line of code to the human eye, if you get what I am saying.

Thank you all again!