I'm trying to use wordpress to re-make my website (www.jansweijer.nl). I'm trying to make it look as close to my old (flash) website (http://www.jansweijer.nl/photography/) as possible.

I would like to center the menu on my wordpress website, and move it a bit down.
(Ideally I would also like grey boxes with rounded corners to appear on rollover, like in the menu in my old website, but that's secondary)

I've been trying to figure out for quite a while now, but centering things seems to be a hassle in CSS :S

Anybody who can help me? I think the code relating to the menu layout is below.

Thanks a lot in advance!

Code:
#mainNav{	
	right: 3%;	
	position:absolute; top:50%; height:20px; margin-top:-10px;	
	font-family: Helvetica, arial, sans-serif;	
}

#mainNav li{
	margin: 0 0 0 1.5em;	
	display: inline-block;		
	padding: 0;	
}

#mainNav ul a{
	line-height: 25px;	
	color: #7b7b7b;
	font-size: .75em;		
}

#mainNav ul ul a{
	line-height: 15px;
	font-weight: normal;
	border-top: none;	
}


#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
#mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a {
	text-decoration: none;
	color: #fff;		
}

#mainNav ul li.sfHover a,
#mainNav ul li a:hover,
#mainNav ul li:hover {
	text-decoration: none;
	color: #fff;	
}