This particular menu problem keeps popping up here - although I see you've changed the menu now from how it was when you first posted!
For the original problem then, you need to crop the left and right 'hover images (left.jpg & right.jpg) to about 7px each - i.e. - leave the 7pixels on the right of the left.jpg, and the the 7pixels on the left of the right.jpg.
To make the hover menu item look centred per/item, you then need to add the 1px (right border) to the right jpg in photoshop or another image editing application, by copying the right border from a screenshot of the menu. (both altered images attached).
To make the menu fit better, You would need to have changed the width of the:
ul#cssmw > li > span > a, ul#cssmw > li > span > a:link {
rule from 80px, to (say) 86px:
ul#cssmw > li > span > a, ul#cssmw > li > span > a:link {
background-image:url("../cssmw_images/bg.jpg");
background-repeat:repeat-x;
color:#FFFFFF;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-style:normal;
font-weight:bold;
height:18px;
margin:0 1px 0 0;
outline-style:none;
padding:10px 15px 6px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
width:86px;
}
Specific advice cannot be given if you are changing the menu after you make your post, though, so this is now academic for your post, and practical only for the next person who looks for an answer to this problem.
EDIT: if you did want to return to the original design, I attach your original menu.css file (altered) use that with the two attached images, and return your #outerWrapper #nav padding back to the original values. Menu screenshot shows what it would have looked like.
Like the way you did the mouse logo image - very neat!