This seems to happen to me every single time I code navigation. I really hate coding navigation. I can’t figure out what I am doing wrong. The last link in the nav always behaves like it ran out of room and gets cut off even though I have not specified a width on the navigation div or the UL. What is it that is happening?
There doesn’t appear to be any fixed width so I cannot determine why your menu is not expanding as it should. The example I made seems to work just fine. I have also removed the SPANS that were flanking your menu and replaced them with :before and :after pseudo thingies (technical term).
the more floats you have to keep track of, the harder it is to make it work. I use to have the same problem so instead what i did was got rid of the div that was wrapping my navigation and just added a class or id to the ul itself. Saves a lot of time. Here is your fiddle, http://jsfiddle.net/r4Twt/13/