Image only menu items with rollover effect

From Joomla! Documentation

I wanted to apply the roll over menu image as described in the post. But it doesn't work.... Can someone help me ? Maybe look in de php files from mod_main menu. Maybe I have made some changes incorrect.

thanks ! Isabel

Hey Isabel,

As shown in the example, if you want a rollover effect, you have to make sure you have the "a:hover" id for all of the "item##" in your list.

  1. pillmenu li#current.item28 a:hover {
 background: url(../images/home-current-over.png) 0 0 no-repeat;


Joomla 2.5 MEnu Headache


This method does not seem to work in 2.5

I have used firebug to analyse the screen output and noticed that the background css property is not been picked up by Joomla. I can change the height, width etc. but no background image is loading.

Now I deliberately but the repeat property on another line just to see what would happen and I can see that property in firebug but not the background-image. I have used just "background: url()" on some of the the "li" and nothing works.

id - #menuOne is for the UL so a I even tried this ul#menuOne and still no image.

Here is the css fo one link:

  1. menuOne li.item-101 a


 width: 47px;
 height: 37px;
 background-image: url(../images/imgHome1_05.png) 0 0;
 background-repeat: no-repeat;


  1. menuOne li.item-101 a:hover


 background: url(../images/imgHomeActive_06.png) 0 0 no-repeat;


DigitariaGlobal 07:17, 7 April 2012 (CDT)