PDA

View Full Version : Prevent font color from changing when hovering over child menu item



Dtorr1981
May 10th, 2017, 10:40 AM
Hi Guys, I'm baffling myself with this one.

I have a main menu set up and when you hover over a menu item the background-color is #f2dabd and the color is #8d0000, however when i hover over a parent menu item, the dropdown appears as expected, but if i then hover over a child item the parent menu title font colour changes (the parent item is neither :active or :hover but the hover background color still applies. I cannot seem to figure out how to prevent it from doing this.

Its a little hard to explain so I will provide a link to the development site in question: Website (http://ccruickshank.co.uk)

Ok so if you hover over the menu item Services then without clicking, hover over one of the child items such as Restoration, you will see that the 'Services' text changes colour to match the hover background color. I just can't seem to figure out how to target it with css?

Any advice on what css i can add to fix this would be most appreciated.

Regards D

sunfighter
May 10th, 2017, 10:15 PM
You must have fixed this, because it doesn't operate that way for me in FF. It works like it should.

Dtorr1981
May 11th, 2017, 01:50 AM
Hi Guys, I'm baffling myself with this one.

I have a main menu set up and when you hover over a menu item the background-color is #f2dabd and the color is #8d0000, however when i hover over a parent menu item, the dropdown appears as expected, but if i then hover over a child item the parent menu title font colour changes (the parent item is neither :active or :hover but the hover background color still applies. I cannot seem to figure out how to prevent it from doing this.

Its a little hard to explain so I will provide a link to the development site in question: Website (http://ccruickshank.co.uk)

Ok so if you hover over the menu item Services then without clicking, hover over one of the child items such as Restoration, you will see that the 'Services' text changes colour to match the hover background color. I just can't seem to figure out how to target it with css?

Any advice on what css i can add to fix this would be most appreciated.

Regards D

Thank you for your reply, i managed to fix it with the following css


#menu ul > li:hover span.zen-menu-heading {
color: #8d0000;
}

deathshadow
May 12th, 2017, 03:13 AM
Might I suggest a different colour on the drop-down hover states? That dark on dark is effectively invisible -- falls into the "loss of context" trap.

Dtorr1981
May 12th, 2017, 10:04 AM
Might I suggest a different colour on the drop-down hover states? That dark on dark is effectively invisible -- falls into the "loss of context" trap.

My thoughts exactly, its on my to-do list. :)

The site is a near replica of one of those dreaded Yell websites, thus we will be updating it significantly once the requirements have been agreed by the client.

Thank you for your input.
Regards
D