I'm trying to make the "hover" background in my whole site be a certain color. So I added the a:hover css style which is working fine. However, I want the MENU items (top menu) to still use the background image they were using when hovered over but instead they're now using the background color I've assigned to all the a:hover tags.

I've put an !important by the background-image but it is still being overridden by that background color for some reason! What am I missing? Here's the code I used:


#menu ul li:hover {
background-image: url(../images/Green/menubar_over.png)!important;
}

Site is at:

killearnlakesrealty.com/

Thanks!

Hi Jacki,

What Joomla version are you using?

Your !important needs a space before it (i.e. right after the closing parenthesis).

If that doesn't solve it for you, could you upload some annotated screenshots of the issue? Fireshot for Firefox is a great tool for annotated screenshots. Here's our tutorial on it:
www.ostraining.com/blog/webdesign/fireshot-firefox/

Kind regards,
Nick

I'm using Joomla 2.5.5. Adding the space didn't change anything. I tried installing the fireshot add-on but it says it's not available for my platform (I'm on a Mac).

So I'll do it the old-fashioned way :)

I'm wanting the dark brown background-image to display whenever any of the top menu items are hovered over - it shows up now only when I hover over a sub-menu. Otherwise, the tan color (which I've set in general for any link tags) is showing up whenever those items are hovered over - that is overriding the menu item css styling no matter what I do!

Hi Jacki,

Try the following instead:
Kind regards,
Nick

THANKS, Nick! That fixed it!

You're welcome, Jacki! I'm glad to be of help! :)

Kind regards,
Nick