Using Joomla 2.5 and the Atmoic template, I have successfully added menu images via the back end as per the tutorials. Im trying to add images for mouse hover over the menu items.
However all the tutorials for this use the specific article/item class to override the default CSS. I specifically want to avoid doing this as it makes my template non-transportable, which the menu images themselves are.
Is it possible to override the Atomic template menu CSS without specifying the custom item id class to achieve this?
========= example as follows :
As per the tutorials I can achieve hover over images (in CSS) by specifying the unique item class, eg :
Code:
.joomla-nav .item435 a:hover {
background: url(../images/home-hover.png) top left no-repeat;
}
Where the CSS generated is :
Code:
<ul class="joomla-nav">
<li id="current" class="selected item435">
<a class="rocket-home" href="/">
<img alt="Rocket Home" src="/images/home.gif">
</a>
</li>
But rather than ensuring, say, the home image always relates to item435 (which it wont), or changing the CSS to suit each time, I put class names on each menu item via the back end hoping to be able to use these in a more generic manner. You can see in the CSS output my target menu item has class "rocket-home".
However try as I might I cant seem to override the screen.css ".joomla-nav li a:hover".
I would have thought ".joomla-nav .rocket-home a:hover" would do the trick. But it does not.
