Help with last element in UL LI

I currently have a horizontal list for the navigational menu;

    <div class="navi">
        <ul id="nav">
          <li><a href="#">one</a></li>
          <li><a href="#">two</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">four</a></li>
          <li><a href="#">five</a></li>
        </ul>
    </div>

HTML:

[CSS]

#menu .navi{
	font-size:16px;
	font-weight:normal;
	float:right;
	height:22px;
	padding-top:2px;
}
#nav li,
#nav li a,
#nav li a:hover{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
	color:#FFFFFF;
}

HTML:

Everything works well except for the last element in the list named "five" - it adds 20px padding on the right of it which leaves a 20px gap between the text and the right of the div.

If I was to go;

<li class="last"><a href="#">five</a></li>

What would I place in #nav .last li or how can I go about removing that padding to the right of the last menu list item?
Thanks!

 

Or could I go something like;

#nav li.last,
#nav li.last a,
#nav li.last a:hover{
	display: inline;
	list-style-type: none;
	padding-right:0;
	color:#FFFFFF;
}

HTML:

??

 

A couple things:
If you're just going to use it once on the page, you could use an ID instead of a tag. (Not necessary, though.)

Second, if you haven't gotten it working yet, are you able to post a link to the site? Your second post seems like it should work, if I'm looking at it right. But, it would be easier to see it in action.

 

Thanks katendarcy - got it working now

 

Makes sense to have doubled padding-- first you say the a has 20px, and then the a again 20 MORE px when :hovered. Which is why you don't write it that way (unless you're trying to get such an effect).

#nav li {
display: inline;
list-style-type: none;
}
#nav a {
padding-right: 20px;
color: #fff;
}
#nav a:hover, #nav a:focus {
anything NEW that should happen on :hover or :focus;
}

a is already inline, should have the padding since it has the text content in it, and only list anything that's different when hovering, otherwise no point in mentioning :hover at all.

 

You should only define the changes...

since the first set of rules (in your original post) refer to the tag, while these refer to a class which is added to the tag, your elements will persist their styling from the tag..

so you only need to define what changes from the other style..

so

#nav li.last,
#nav li.last a,
#nav li.last a:hover{
	padding-right:0;
}

HTML:

would suffice ..