This is a common issue I encounter frequently, as the navigation on our website is always constructed by the client without informing us of the number of items that will be included.
One way to deal with this is by utilizing the table
display properties:
nav {display:table;}
nav ul {display:table-row;}
nav ul li {display:table-cell;}
Additionally, I have eliminated the use of float
for your list items.
I have intentionally used text with white space to demonstrate its effect on wrapping.
Another approach would be to manually set the widths inline on the server side using percentages (or px
if the total width in pixels is known), based on the number of top-level items available.