How can I really justify a horizontal navigation menu in wordpress theme? I am making thematic child theme.
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!