I have a CSS menu trick to fix that. I copied this from my in the process knowledge base on my site.

A typical thing that I do is pad the right side of each menu with: “padding-right: _px;” This tag is (under good practice) placed like so under this area:

/* style the links for the top level */
.menu a, .menu a:visited
{display:block;
font-size:11px; text-decoration:none; color:#fff;
width:127; height:30px;
border:1px solid White;
border-width:1px 1px 1px 1px;
background:#443b7c;
padding-left:9px;
padding-right:0px;
line-height:29px;
}

This particular example has a right side padding of 0 on the IE one because without it, the button goes past the sides of the template on the right only. When you make the fix for other browsers you need to do this

/* style the links for the top level */
.menu a, .menu a:visited
{display:block;
font-size:11px; text-decoration:none; color:#fff;
width:127; height:30px;
border:1px solid White;
border-width:1px 1px 1px 1px;
background:#443b7c;
padding-left:9px;
*padding-right:0px;
line-height:29px;
}

Note how there is a asterisk (*) where you make the fix…Internet Explorer will read that one, but most browsers won't take the second one over the first one in the case of that asterisk, without that they would read from the SECOND set of tags, (which is a good thing to keep in mind) as IE7 would if it didn't have the first one.