Should the width of the :before and the width of the :after be equal? As it is, if I make the :after be the correct width, your menu isn't centered. Is it supposed to be centered?
–
thirtydotJun 12 '12 at 21:29

Only just saw your comment now sorry thirtydot. No, the menu is not supposed to be centered.
–
Caroline ElisaJun 12 '12 at 22:25

The example below works by adding an extra li to fill, but since the font will render dirrentely among browsers you cannot predict the width. The workaround in this example creates a container (#cen) for centering the content and setting the width, also the overflow property is set to hidden. Doing this you are able to add a significantly bigger div wrapping the ul and the filler li with a lot more width than required. Which causes no problem since the parent.parent is hidding overflows.

Getting rid of float on li allows you to simply define display: block;background: white on their ul parent without any need for :before and :after pseudos to fill a space. This ul will already be 100% width because of display: block.

To do this, you can display each item as inline-block (display: inline and zoom: 1 for IE6/7) and stick closing and opening </li><li> tags to avoid whitespace between them.

Bonus in the fiddle: in a second example, items occupy all available width (not necessarily pretty, depends of your design and menu) by using table-cell (the CSS value, not the unsemantic table>tr>td HTML code, of course). For IE6/7, same fallback as above (and same rendering).