UPDATED: Prevent font color from changing when hovering over child menu item

Question

I'm baffling myself with this one.

Updated: I had to make some CSS menu changes and now the previous solution no longer works - Any suggestions?

I have a Joomla 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. Regards D

Answer 1

The hover colour appears to be set when you hover over the <span> that contains your title, but your sub-menu is not part of this tag.

A simplified version of your menu item is as follows...

<li>
  <span class="zen-menu-heading">MENU ITEM TITLE</span>
  <ul><!-- SUBMENU !--></ul>
</li>

And the css being applied...

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

This means that when you roll out of the title area onto the sub-menu, this CSS no longer be applied because you are no longer hovering over the <span>.

The background colour of the tab works because it is set on hovering over the <li> tag that contains both your title and the submenu.

Try deleting the <span> hover effect and instead set the colour when you hover over the <li> ie

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