You might try this:

ul.dropdown li:nth-last-child(1){padding-right:20px;}

Here's an article relating to what @TheDoc has just mentioned.

I should mention that the absolute positioning of my nav bar is keeping it to the left and hence the gap at the right. I am not sure how you could reverse this without distorting the output altogether.

Wow - that is pretty nifty. Thanks very much.

IE9 supports :last-child. Make a jsfiddle of the problem.

Are you sure it's just IE with that problem? It look like you're trying to cover up the gap at the end by adding padding to the last-child list item. So if that's what you're trying to do, it wasn't working in my FireFox 8 either because you weren't giving enough padding: http://jsfiddle.net/7rSMc/3/

Here is another way of doing it (I'd say this is a better way): http://jsfiddle.net/7rSMc/2/

http://jsfiddle.net/7rSMc/3/ - changed this piece of css:

ul.dropdown li:last-child {
	 padding-right: 42px;
}

http://jsfiddle.net/7rSMc/2/ - I added a couple of properties to this selector, namely the background, left and width properties:

ul.dropdown {
    background: #647484;
    font: 1.6em Verdana, Geneva, sans-serif;
    position: absolute;
    top: 103px;
    left: 12px;
    list-style: none;/*no bullets*/
    width: 800px;
}

sorry scrap that last comment.

I'm going to do that tomorrow morning now. In case you were hanging about :)

Do you see what I mean regarding the nav bar?

An advice would be great!

I feel like a bit of an idiot. I just should have had the background color in the main selector. I just played with padding and the titles are spread evenly now.

Thanks very much for helping out!

You can use last-child in ie7-8 with this solution http://divhack.com/node/7