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:

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 advise would be most appreciated. I had asked this in the Joomla specific exchange, and received an answer - but the answer no longer seems to work, thus as it isnt Joomla specific, I am asking this here.

Regards D

closed as off-topic by John Conde May 10 '17 at 12:32

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • The colour gets set by #menu ul > li span.zen-menu-heading:hover{color: #666}. When you are no longer hovering over that element the hover no longer applies, so it falls back on the #menu ul > li span.zen-menu-heading colour rule, which is now the same colour as the background. – Tim Fountain May 9 '17 at 13:01
  • Thanks @TimFountain - This is what the problem is - I need to maintain the hover color on the parent item when hovering on the child item - Any suggestions? – Dtorr1981 May 9 '17 at 13:09
  • This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. It its current form, this question does not meet their guidelines. – John Conde May 10 '17 at 12:32

The over the li is what causing the problem.

So when you hover over the span the color changes but when you hover over the li only the background-color changes .

To resolve the problem you need to change the color of the span when you hover over the li.

.zen-menu-horizontal ul li:hover > span {
    color: #666;
  • Thank you :) All sorted. I couldn't see the wood for the tree's. – Dtorr1981 May 10 '17 at 14:57
  • I'm glad it helped :) – Chiller May 10 '17 at 15:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.