CSS Liquid menu with wp_list_pages

Maybe I’m missing something but it looks like you can achieve the same reslut without a span… for my site I did it this way:

.mainmenu {
text-align: center;
}

.mainmenu ul {
list-style: none;
padding:0px;
border:0px;
}

.mainmenu li {
	border: 0px;
	display: block;
	float: left;
	margin: 0px 2px;
	height: 36px;
	background: url(img/tabright.jpg) bottom right no-repeat;
}

.mainmenu li:hover {
	background: url(img/tabright.jpg) top right no-repeat;
	}

.mainmenu li a {
	color: #666;
	font-size: 13px;
	padding:0 18px;
	text-decoration: none;
	height: 36px;
	display: block;
	background: url(img/tableft.jpg) bottom left no-repeat;
	line-height: 36px;
	}

.mainmenu li a:hover {
	border:0px;
	background: url(img/tableft.jpg) top left no-repeat;
	color: #666;
	}

The current page highlighting is made using class li.current_page_item and the submenu is hidden using:

.mainmenu ul ul {
	display: none;
}

and shown with:

.mainmenu ul li.current_page_item ul {
	display: inline;
}

I don’t know if that helps. You can see the result on this page.

I think it would help a little bit. I’m gonna try this. Thanks!

However that won’t work at all for users running Internet Explorer 6 or below since they don’t support the pseudo-class :hover on elements other then on regular links (not a LI-tag for instance). One needs the suckerfish javascript or the csshover.htc-file for that. ??

————————————————
Tommie Hansen, graphic designer & website designer
Webbl?sningar & webbhotell