I decided to add some tabs to my top navigation using CSS3. The tabs are dynamically resized depending on the length of the text in the links. This is easy to do. If you’re using an unordered list all you need is this:

nav ul {
	...other properties...
	display: box;
	display: -moz-box;
}

li#nav nav ul.menu li {	
	...other properties...
	box-flex: 1;
	-moz-box-flex: 1;
}

And then to get rounded corners on the top left and right corners I used this:

li#nav nav ul.menu li {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px #eee solid;
}

While display:box has been around since 2009 and new properties have developed since then (i.e. flex), they have not been adopted by all browsers yet, so this is currently the safest approach.