help styling two tiered navigation! thanks :)

hi there, i hope someone can help with this as it is causing some grief! i need to make a two tiered tab style navigation. i’ve got it working but styling it correctly is causing some trouble.

when the parent link is hovered over or active it jumps to the right. i’m also not sure how i can add rounded corners to the tabs, is it possible to put the navigation items into divs?

here it is now.

and here is a screen shot of how i would like it to look.

here is the code that generates the nav:

<?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) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<ul id="subnav">
</ul>
<?php } ?>

and here is the css:

#nav {
	background:#ffffff;
	height:20px;
	}

#nav li {
	margin:0 0px 0 30px;
	}

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

#nav a, #nav a:visited {
	color:#4d4d4d;
	text-decoration:none;
	}

#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:#4d4d4d;
	margin:0;
	padding:5px;
	color:#FFFFFF;
	}

#subnav {
	background:#4d4d4d;
	height:20px;
	}

#subnav li {
	padding:0 7px;
	}	

#subnav a, #subnav a:visited {
	color:#FFFFFF;
	text-decoration:none;
	}

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