0

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

3

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;
}
  • Thank you - This has been annoying me for far too long, sometimes a second pair of eyes makes all the difference :) – Dtorr1981 Apr 28 '17 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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