All the menu tabs are the same 100px width; in all browsers. If you add a color temporarily you will see what is happening:-
.menu { background-color: teal;
font-family:".........etc
and
.menu ul li a, .menu ul li a:visited {
background-color: gray;
display:block; ......etc
Main is a shorter word than the others so there is more space each side.
You could work out a different width for each menu tab to get less space next to Main and more next to the others (possibly also to the drop down boxes as well). Your .menu is 430px overall; the total of all the individual menu tab needs to be 430px or less and each one is its basic width plus the 1px right border.
Then you would have to put a different width into each html code like:-
<li><a class="drop" style="width: 85px;" href="index.html">Main
<!--[if IE 7]><!-->
</a>......etc