CSS active menu item - css

Question

Hi I'm trying to modify a web template which doesn't have different colors for active menu items. I've tried various changes to be able to adjust this. Any ideas? Here is the css:
/** TOP MENU **/
.top_menu .moduletable {
margin:0;
}
.top_menu li {
margin:0px 0 0 5px ;
padding:0;
float:left;
height:100px;
list-style : none;
background : transparent url(../images/top_menu_left.png) 0 0 no-repeat;
opacity:0.6;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* fix IE8 */
filter: apha(opacity = 60); /* fix IE7 */
-webkit-transition : all 0.4s ease-in-out;
-moz-transition : all 0.4s ease-in-out;
-ms-transition : all 0.4s ease-in-out;
-o-transition : all 0.4s ease-in-out;
transition : all 0.4s ease-in-out;
}
.top_menu li:hover {
opacity:1;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* fix IE8 */
filter: apha(opacity = 100); /* fix IE7 */
}
.top_menu li a {
display:block;
color: #24221E/*8c8c8c*/;
text-shadow:0 0 3px #fff;
background : transparent url(../images/top_menu_right.png) 100% 0 no-repeat;
text-decoration:none;
text-transform: none;
font-weight:bold;
font-size:90%;
margin-right:-13px;
padding: 60px 22px 4px 20px;
height:40px;
}
Any help would be greatly appreciated

Answer 1

I see that you are using Joomla as a Content Management System and you have to use a class to style an item, for example active, and then you can use CSS to assign a different styling for this item.
.active {
text-decoration: underline;
font-weight: bold;
}
If you want to change the color of the link you need to adress the a tag directly using the following code.
.active a {
color: red;
}
You might find this answer also useful: Joomla - how to hightlight the menu item for active page