However, instead of using the same CSS they have, I would recommend copying the "=Menu" section of the stylesheet for your http://piteiraphotography.com/ blog and then adjusting all of the colors and removing lines you didn't modify. Also note that you can adjust fonts on the Appearance → Custom Design → Fonts page.

Here is an example you can start with:

#access {
	background: white;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-left: 1px solid #f9f9f9;
	border-right: 1px solid #f9f9f9;
}
#access a {
	color: black;
	font-family: “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif;

}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: white;
}
#access li:hover > a,
#access a:focus {
	background: white;
	color: black;
}

Adjust the colors and font stack as necessary.

I have the Custom Design upgrade on this blog: http://piteiraphotography.com/ and so far I am loving the little tweaks and changes I have been able to make to the CSS, with the help of this forum. I recently came across another blog using the same theme and really like the way they have the menu laid out. (http://www.florencefinds.com/)

I am aware that the blog I am referring to is not a wordpress.com blog and I am also aware of the differences between wordpress.com and .org. My question is how would I be able to achieve a similar look on my blog with the custom design upgrade? I am not looking to made an identical copy but I particularly like that the black boxy effect is gone, and the fact that the font is larger than the default.

Any help or tips would be hugely appreciated! Thanks so much.

#nav a {background-color:#f00!important;}

#nav {background-color:#fff;}
#nav .current_page_item a, #nav li:hover > a, #nav ul ul:hover > a, #nav a {background-color:#345;}

http://quiltingties.wordpress.com/