Page_item and current_page_item are driving me crazy when using subs

I’ve been working on this problem for 6 hours straight last night, and nothing seems to work. Argh!

Here’s the problem:
I’ve got a #sidebar with a .menu. The menu has parent pages and child/sub pages. I want the sub pages to have a different colour than the parent pages, so they’re easier to distinguish.

I got this working with either: `.menu .current_page_item li a {
color: #888888;
}`
and

.menu .page_item li a {
	color: #888888;
}

It works fine when the parent of those sub pages is active. It shows the right colour to indicate that’s it’s the active page (a reddish colour).

But here’s where it goes wrong:
When I click on one of the sub pages, the current_page_item colour doesn’t work. It somehow gets overruled by .page_item li a. When I remove this line from my CSS file, the current_page_item colour DOES work, but the other two subs turn into same colour as my unactive parent pages.

Can anyone please help? I’ve tried every solution I could find, but nothing seems to work…

The relevant code:

#sidebar {
	width: 100px;
	float: right;
	text-align: right;
	padding: 0;
	margin: 0;
	display: inline; /*IE-spul*/;

}

/*voor backgroundblock*/
.menu {
	width: 123px;
}

/*sidebar hoofdmenuitems was .sidebar*/

.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 5px 35px 0 0px;
	font-size: 21px;
	text-transform: lowercase;
	line-height: 1.2em;
	font-weight: normal;
	}

/*sidebar submenuitems was .sidebar*/
.menu ul ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 19px;
	text-transform: lowercase;
}

/* Page item */
.menu .current_page_item a {
     color: #ff0048;
}

.menu .current_page_item li a {
     color: #888888;
}

.menu .current_page_item li a {
	color: blue;
}

.menu .current_page_item li a:hover {
	color: #ff0048;
}

/*when I remove this, the active colour works but the items turn black*/
.menu .page_item li a {
	color: #888888;
}

.menu li.page_item li a:hover {
	color: #ff0048;
}