Justify navigation menu in wordpress

Get Started
1

How can I really justify a horizontal navigation menu in wordpress theme? I am making thematic child theme. (more about thematic: A Guide To Thematic | A Wiki-Editable Resource for Using & Customizing The Thematic Theme Framework)

I need my navigation menu to be justify:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

But I can’t figure out how can I do that?

Here is the html and css code:


<div class="menu">
	<ul class="sf-menu sf-js-enabled">
		<li class="page_item page-item-1">
			<a href="http://WP/page1/" title="Page1">
		</li>
		<li class="page_item page-item-2">
			<a href="http://WP/page2/" title="Page2">
		</li>
		<li class="page_item page-item-3">
			<a href="http://WP/page3/" title="Page3">
		</li>
		<li class="page_item page-item-4">
			<a href="http://WP/page4/" title="Page4">
		</li>
	</ul>
</div>

.menu {
	width: 940px;
	margin: 0 auto;
}

.sf-menu {
	margin:	0;
	padding: 0;
	list-style:	none;
	border-right: 1px solid #ccc;
	float: left;
}

.sf-menu ul {
	position: absolute;
}

.sf-menu ul li {
	width: 100%;
}

.sf-menu li {
	float: left;
	position: relative;
}

.sf-menu a {
	display: block;
	position: relative;
}

Please help me! Thanks!

2

text-align: justify;