I don't know if this would help anybody or not but I thought I would post a Page menu that seems to be working for me. I have a background image behind the entire menu. When you mouse-over a link, an image is loaded. When you're on a page, that page's link also has a background image. When you're not over a link, the link is transparent.

This menu is working on http://www.tribu2.com/ as of November 1, 2011.

I do not know css very well, so I don't know if this coding needs work or could be improved.

ul.rMenu {
	padding:0 !important;
	margin:0 !important;
	list-style:none !important;
	border:0 !important;
}
ul.rMenu li { 
	margin:0 !important;
	padding:0px 0px 0 0 !important;
	border:0 !important;
}
ul.rMenu li a { 
	margin:0 !important;
	padding: 14px 12px !important;
	color:#333 !important;
	font:normal 14px Arial, Helvetica, sans-serif !important;
	text-decoration:none !important;
	border: solid 0px #FFFFFF;
}

div#menu1 ul.rMenu li {
    background-color: transparent;
}
div#menu1 ul.rMenu {
    background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
	ul.rMenu li a:hover {
	color:#000 !important;
	border: solid 0px #FFFFFF;
	background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;
}
ul.rMenu li.current_page_item a {
	color: #000 !important;
	background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;

}

#menu1 {
	width: 990px !important;
	margin: 0px;
}

div#menu1 {
	border-top: 0px solid #513154;
	border-bottom: 0px solid #513154;
	border-right: 0px solid #513154;
	border-left: 0px solid #513154;
	background-image: URL(http://www.tribu2.com/images/navbar-background2.gif) !important;
}

Very nice... The only coding things I see are that you probably don't need.
border: solid 0px #FFFFFF; or border:0 !important;
Instead if you want no borders use border: none; or perhaps border: none !important;