Problem Changing Background Hover Colour on Sub Menus Options

[kevb8ll]

I have trawled through inline css files on the WP template, and found where to change the menu I want the hover colour to be blue. The change I have applied works to the first sub level.

As you can see from attached images the 1st level hovers blue - the colour I want. Adhesives and tapes are on the same level and they are both blue.

In writing, 1st level Pens and Pencils is blue, however lower levels are still red, (Pens example).

How can I apply the blue to sub levels, no matter how many?

The css I am using is:

.nav-dropdown.nav-dropdown-bold > li > a:hover, .nav-dropdown.nav-dropdown-bold > li > li > a:hover {

background-color: #6B82A5 !important;}

The site is on a sandbox platform at the moment but the address is: My Webpage



This post has been edited by kevb8ll: Aug 17 2020, 06:20 PM

[pandy]

What about you try to find where the red is specified and change that too blue?

[kevb8ll]

That's what I thought I had done. However the sub menus didn't change.

[pandy]

OK. I thought you used !important to override the original styling. Were the selectors really written like that and worked?

Anyway, you don't need that level of specificity, me thinks. Replace all of the above with the below and I think it'll work for all menu links, both levels.

CODE

.nav-dropdown li > a:hover { background-color: #6B82A5 !important }

The !important is still needed so I assume the original selector is somewhere else. But a patchwork is better than a not working page so...

[kevb8ll]

OK. I thought you used !important to override the original styling. Were the selectors really written like that and worked?

Anyway, you don't need that level of specificity, me thinks. Replace all of the above with the below and I think it'll work for all menu links, both levels.

CODE

.nav-dropdown li > a:hover { background-color: #6B82A5 !important }

The !important is still needed so I assume the original selector is somewhere else. But a patchwork is better than a not working page so...

Hi Pandy I got it working this morning by adding:

CODE

.nav-dropdown.nav-dropdown-bold a:hover { background-color: #6B82A5 !important }

I felt pleased with myself. However when I commented all mine out and added yours, it worked. Now I feel like a dunce!

Can you explain why your single piece of code works as a replacement for all of mine please? I want to learn.

[pandy]

Your second selector, 'a:hover, .nav-dropdown.nav-dropdown-bold > li > li > a:hover ', doesn't match.

You've used the child selector. This child and parent thing means the child must be a first level descendent of the supposed parent. The LI you try to catch with the second li in the selector above is a descendant of the first LI, but they aren't child and parent because there is a UL between them. The second LI is rather a grandchild of the first LI (not that grandchildren exist in CSS).

I too found this confusing at first until I started to think of it in human terms, what child and parent really means in plain English. I'm not my granny's child and she isn't my parent. It's really very straightforward, so it's odd it still can be confusing. Now I don't understand why I found it confusing to start with, because it really isn't.

The selector I used is probably unnecessary specific too. But I was lazy. Those convoluted class names killed me. I know it's WP, so no criticism intended. Not against you anyway.

[kevb8ll]

Your second selector, 'a:hover, .nav-dropdown.nav-dropdown-bold > li > li > a:hover ', doesn't match.

You've used the child selector. This child and parent thing means the child must be a first level descendent of the supposed parent. The LI you try to catch with the second li in the selector above is a descendant of the first LI, but they aren't child and parent because there is a UL between them. The second LI is rather a grandchild of the first LI (not that grandchildren exist in CSS).

I too found this confusing at first until I started to think of it in human terms, what child and parent really means in plain English. I'm not my granny's child and she isn't my parent. It's really very straightforward, so it's odd it still can be confusing. Now I don't understand why I found it confusing to start with, because it really isn't.

The selector I used is probably unnecessary specific too. But I was lazy. Those convoluted class names killed me. I know it's WP, so no criticism intended. Not against you anyway.

Sorry I'm not sure I have it yet. So does the Li look upwards not downwards?

No you're right, the template is a commercial template and is qctually quite complicated. To be fair though, the options does deal with most things, it's just when you need custom CSS the multi layered CSS approach gets confusing. I can usually muddle my way through by searching by the colour and then changing it - like I did initially, however when things are in different places that's when I struggle.

I appreciate your help.

[pandy]

Let's take a simpler example where it's easier to see what's what.

CODE

<div id="parent">
   <p>
   This is a line of text.</p>
   <p>
   This is a line of text.</p>
   <div>
      <p>
      This is a line of text.</p>
      <p>
      This is a line of text.</p>      
   </div>
   <p>
   This is a line of text.</p>
   <p>
   This is a line of text.</p>  
</div>

Then apply the following CSS.

CODE

#parent > p   { background: yellow }

The two first and the two last lines will get a yellow background. The two lines in the middle won't. Why? Because they are inside the DIV. They are not children of #parent. Their parent is the DIV.

If we instead use this CSS...

CODE

#parent > *   { color: red }

... all the text will be red. Why? Because the DIV is also a child of #parent and with the universal selector (*) any element that's a child of #parent is matched.

A child is an element that's directly contained in another element (the parent). If it's nested inside yet another element (like the DIV above) it's still a "relative", a descendant element in this case, but it's not a child of the first element. A relation exists, but not a parent-child relation.

Did that help?

[kevb8ll]

Let's take a simpler example where it's easier to see what's what.

CODE

<div id="parent">
   <p>
   This is a line of text.</p>
   <p>
   This is a line of text.</p>
   <div>
      <p>
      This is a line of text.</p>
      <p>
      This is a line of text.</p>      
   </div>
   <p>
   This is a line of text.</p>
   <p>
   This is a line of text.</p>  
</div>

Then apply the following CSS.

CODE

#parent > p   { background: yellow }

The two first and the two last lines will get a yellow background. The two lines in the middle won't. Why? Because they are inside the DIV. They are not children of #parent. Their parent is the DIV.

If we instead use this CSS...

CODE

#parent > *   { color: red }

... all the text will be red. Why? Because the DIV is also a child of #parent and with the universal selector (*) any element that's a child of #parent is matched.

A child is an element that's directly contained in another element (the parent). If it's nested inside yet another element (like the DIV above) it's still a "relative", a descendant element in this case, but it's not a child of the first element. A relation exists, but not a parent-child relation.

Did that help?

That's a great explanation. I understood that. So how does Li, and for that matter ul, apply in that example. I know you were just using div and text and not a menu. I'm determined to understand this!

[pandy]

Oh crap. Now I have to look at the WP page again.

.nav-dropdown.nav-dropdown-bold > li > li > a:hover

The UL is as the inner DIV in my example. It comes between the LI with the ball pen and the fist LI you use in your selector. That stops them from being parent and child. The UL is the child of the first LI and the parent of the second.

In human terms the first LI is the grandparent of the second LI, not its parent. Just as your grandma isn't you mother.

[kevb8ll]

Oh crap. Now I have to look at the WP page again.

.nav-dropdown.nav-dropdown-bold > li > li > a:hover

The UL is as the inner DIV in my example. It comes between the LI with the ball pen and the fist LI you use in your selector. That stops them from being parent and child. The UL is the child of the first LI and the parent of the second.

In human terms the first LI is the grandparent of the second LI, not its parent. Just as your grandma isn't you mother.

Awesome thanks mate - I'm glad I posted here now!

[pandy]

Thank you. We aim to please.