Instead of floats, use inline-blocks on the li
elements, and then they can be centered applying text-align: center
on the ul
block.
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
display: inline-block;
border-bottom:4px solid #efefef;
margin-right: 15px;
padding-right: 20px;
padding-bottom: 5px;
}
See fiddle: http://jsfiddle.net/audetwebdesign/kSV4K/3/