We’ll need code to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.

If you’re wondering why the CSS seems overly verbose, it’s to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.

Here is the PHP:

<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>

<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");

if ($children && is_page()) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

Here is the CSS:

* {
	margin:0;
	padding:0
	}

#nav {
	background:#577da2;
	border-bottom:1px solid #FFF;
	height:32px;
	}

#nav li {
	margin-right:25px;
	}

#nav li, #subnav li {
	float:left;
	list-style:none
	}

#nav a, #nav a:visited {
	color:#FFF;
	text-decoration:none;
	font-weight:bold
	}

#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
        {
	background:#295887
	}

#subnav {
	background:#e6eef7;
	border-top:2px solid #577da2;
	border-bottom:2px solid #cad8e6;
	height:28px;
	}

#subnav li {
	border-right:1px solid #295887;
	padding:0 7px;
	}	

#subnav a, #subnav a:visited {
	color:#295887;
	text-decoration:none;
	font-weight:bold
	}

#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
	text-decoration:underline
	}