Navigation bar items moving - html

Question

When I hover mouse over menu items they don't always fit perfectly within the navigation bar, I am also unable to fix that tiny gap between border and last navigation item and the gap changes when I zoom in/out the page, when I zoom in/out on google chrome and hover over menu items the hovered item gets taller than the rest of the bar. I've been trying to figure this out for quite some time now. Thank you for your help in advance.
Main objectives: getting rid of the gap next to "contact", making hovered items fit into the navbar, fixing google chrome navbar zooming issue.
Here's my codepen: http://codepen.io/anon/pen/QbBgKR
<nav class="menu">
<ul class="clearfix">
<li>HOME </li>
<li>PROFILE</li>
<li>STUFF</li>
<li>STUFF</li>
<li id="long"> PRODUCTS<span class="arrow">▼</span>
<ul class="sub-menu">
<li>STUFF1</li>
<li>STUFF2</li>
<li>STUFF3</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav><!-- menu -->
.clearfix:after {
display: block;
clear: both;
}
.clearfix {
margin-left: -37px;
}
nav {
font-size: 1em;
width: 700px;
background-color: #3A5199;
font-family: Verdana;
}
#current {
background-color: #6082ec;
}
.menu li {
display: inline-block;
list-style: none;
position: relative;
width: 15.2%;
text-align: center;
margin-left: -0.4%;
margin-right: -0.4%;
}
.menu li:hover {
background-color: #6082ec;
}
.menu a {
text-decoration: none;
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#long {
width: 24%;
}
.menu .arrow {
font-size: 12px;
line-height: 0%;
}
.sub-menu {
width: 128px;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background-color : #6082ec;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li:hover {
background-color: #3A5199;
}
.sub-menu li {
width: 131%;
display: block;
right: 39.2px;
}
.sub-menu a {
position: relative;
text-align: center;
}

Answer 1

Using a reset stylesheet or something like normalize.css will go a long way in fighting various margin, padding and display inconsistencies across browsers and you won't have to do negative margin "hacks" like you did for .clearfix.
Although you have calculated your percentages correctly for your li to add up to 100%, the gap to the right of Contact arises with the pixel rounding of the percentage width you've applied.
15.2% of 700px = 106.4px
The browser will likely round down to 106px. The change in the gap when zooming is also likely related to the percentage widths. At one zoom level the value gets rounded differently.
106px * 5 = 530px + 24% of 700px (168px) = 698px
Since you're using a fixed with on your <nav> element, why not use fixed widths on the li also? Or change up the percentage values a bit. 15.2% for the home link creates more padding between the text Home and the left and right edges of the li than it does for Profile.
Fixed Width Solution
/* default width for all li */
.menu li {
width: 108px;
}
/* Home */
.menu li:nth-child(1) {
width: 100px;
}
/* Products */
.menu li:nth-child(5) {
width: 168px;
}
As far as zooming in Chrome and getting a height change when hovering, I cannot replicate that issue.

Answer 2

Negative margin for UL is working.
.clearfix {
margin-left: -37px;
margin-right:-0.4%;
}
It's strange math her - imho.