You cannot set the width of an inline element. The anchor is an inline element. You probably need to set display:inline-block (or block, or float it) so you can. The 5px is probably the width of the single space ( ).
But you should always have some content in your anchors if only for accessibility. Hide it with text-indent:-9999px or similar. (It must also be a block-level element for text-indent to work.)
And . . . watch out if you want to use text-align: in combination with text-indent, it will do some weird stuff. :-) Also set outline:none or you'll get the dotted line running off the page when the link is active (mouse down.)
The second thing to watch out for is "background" is generally a shorthand version for specifying all attributes (as you can see with top left no-repeat) so in a case like this I'd use background-image instead.
Not sure why you're doing all the positioning stuff on the elements themselves. Since you have no "left" or "right" set on top-panel or panel, regular floats in combination with semantic HTML for this list of links will do.
This example makes use of the shrink wrap effect of floating in that a floated parent object will contain all of it's floated children, which makes for a lot less frustration when working with floats. Strange (different, never seen it) approach, not quite sure how I'd handle a variable width and height on hover. Your job might be easier if you use ONE width and height on the li and the a, and mod the image to fit that.