# CSS elements overwriting background image on li a:hover

**URL:** <https://forum.kirupa.com/t/css-elements-overwriting-background-image-on-li-a-hover/325597>\
**Category:** web dev\
**Created:** [October 25, 2011, 2:17pm UTC](https://forum.kirupa.com/t/css-elements-overwriting-background-image-on-li-a-hover/325597 "2011-10-25T14:17:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frostyboskitzo](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Frostyboskitzo](https://forum.kirupa.com/u/Frostyboskitzo)\
**Post date:** [October 25, 2011, 2:17pm UTC](https://forum.kirupa.com/t/css-elements-overwriting-background-image-on-li-a-hover/325597/1 "2011-10-25T14:17:03Z")

</div>

Hello,

I stumbled across this forum and there was a tonne of useful resources here - but alas neither these nor any google-fu have been able to help me answer my question.

The site in question can be viewed at; [http://d1009662.myweb.iinethosting.net.au/mcfc/](http://d1009662.myweb.iinethosting.net.au/mcfc/)

I’ve got a simple Joomla based site, which has a dropdown menu which primarily runs on CSS. Forgive me at the moment, it’s a bit of a mess, but I’m absolutely stumped by a problem where it seems to always load:

.dj-main li.hover ul.dj-submenu li { Line 102 ([http://d1009662.myweb.iinethosting.net.au/mcfc/templates/jm-template/css/djmenu\_fx.css](http://d1009662.myweb.iinethosting.net.au/mcfc/templates/jm-template/css/djmenu_fx.css))  
before it loads

.dj-main li.hover { Line 83 ([http://d1009662.myweb.iinethosting.net.au/mcfc/templates/jm-template/css/djmenu\_fx.css](http://d1009662.myweb.iinethosting.net.au/mcfc/templates/jm-template/css/djmenu_fx.css))

I’ve tried moving the elements around on the sheet, tried searching for depth, and other shenanigans, but I’m not sure how I can get the element on line 83 to take precedence over the element on line 102.

The ultimate goal is to simply have the bg image of the link a different color when hovered over (currently it refers to

```auto
[COLOR=black]background[/COLOR]: [COLOR=#770088]url[/COLOR][COLOR=#770088]([/COLOR]../[COLOR=#770088]images[/COLOR]/[COLOR=#770088]buttonbg_active[/COLOR].[COLOR=#770088]png[/COLOR][COLOR=#770088]) [/COLOR][COLOR=#770088]repeat-x [/COLOR][COLOR=#770088]right [/COLOR][COLOR=#770088]top[/COLOR];

```

and I want it to refer to

```auto
[COLOR=black]background[/COLOR]: [COLOR=#770088]url[/COLOR][COLOR=#770088]([/COLOR]../[COLOR=#770088]images[/COLOR]/[COLOR=#770088]buttonbg[/COLOR].[COLOR=#770088]png[/COLOR][COLOR=#770088]) [/COLOR][COLOR=#770088]repeat-x [/COLOR][COLOR=#770088]right [/COLOR][COLOR=#770088]top[/COLOR];

```

Any ideas? I’m pretty sure I’ve given enough info - I have a feeling i’m looking way too close at this and missing something in the bigger picture.

Thanks in advance.  
Frosty