daebat

I’m trying to accomplish background images applied to active menu items. For example… Menu item two is menu_02.jpg. Easy enough with this code:

ul.sf-menu li.page-item-2 a{
	background:url(images/menu_02.jpg) 0 0 no-repeat transparent;
	width:156px;
	height:43px;
	text-indent: 9999px;
	line-height:0;
	font-size:0;
}

Now I’d like for the image to change if active… so the code (provided the current_page_item class was moved below to the link) would work from this CSS:

ul.sf-menu li.page-item-2 a.current_page_item {
	background:url(images/menu-active_02.jpg) 0 0 no-repeat transparent;
	width:156px;
	height:43px;
	text-indent: 9999px;
	line-height:0;
	font-size:0;
}

If I were to use your code it would apply the same background image to ALL of my menu items. The design I was sent does not have web friendly fonts so this is why I am using images instead of text (although the text is there, just indented -9999 px.)

HERE IS MY PAGE: http://honyat.com/steph/