horizontal float item pushed down in chrome, but not firefox - html

Question

Why is the last list item in the submenu lower than the rest in Chrome, but aligned in Firefox?
JSFIDDLE with font turned red for visibility
ACTUAL SITE
I have tried everything I can think of with padding, margin, vertical align, last child, etc. Baffled. Thank you.
#hmenuWrapper {
width: 100%;
}
#hmenu, #hmenu ul, #hmenu ul li, #hmenu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Arial', sans-serif;
}
#hmenu:before, #hmenu:after, #hmenu > ul:before, #hmenu > ul:after {
content: '';
display: table;
}
#hmenu:after, #cssmenu > ul:after {
clear: both;
}
#hmenu {
position: relative;
top: 0px;
left: 180px;
zoom: 1;
height: 60px;
width: 740px;
background: url(../media/images/bottom-bg.png) repeat-x center bottom;
border-radius: 2px;
}
#hmenu ul {
background: url(../media/images/nav-bg.png) repeat-x 0px 4px;
height: 69px;
}
#hmenu ul li {
float: left;
list-style: none;
}
#hmenu ul li a {
display: block;
height: 37px;
padding: 17px 14px 0;
margin: 4px 0px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
#hmenu ul li:first-child a {
margin: 4px 0px 0 0;
}
#hmenu ul li:last-child {
background-color: #168b09;
}
#hmenu ul li a:hover {
background: url(../media/images/colorHover.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 20px;
color: #616161;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
opacity: 1;
}
#hmenu ul li.active a {
background: url(../media/images/color.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 20px;
color: #616161;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
opacity: 1;
}
#nav-wrap {
position: relative;
left: 180px;
top: -3px;
zoom: 1;
height: 40px;
width: 740px;
float: left;
background: url(../media/images/colorinv.png);
}
#nav {
display: inline;
height: 40px;
width: 100%;
}
#nav a:hover {
color: #444444;
text-decoration: none;
}
#nav li:hover {
background: url(../media/images/nav-bginvHover.png);
}
#nav a li:hover {
color: #444444;
}
#nav ui li a {
height: 40px;
width: 185px;
}
.nav-item {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
width: 185px;
list-style-type: none;
color: white;
}
.nav-item a {
height: 40px;
width: 185px;
}
#nav li.nav-sel {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 185px;
list-style-type: none;
color: white;
font-family: 'Arial', sans-serif;
background: url(../media/images/nav-bginv.png);
}
#nav li.nav-sel a {
color: white;
height: 40px;
width: 185px;
line-height: 40px;
}

Answer 1

Remove display: inline from #nav, it's not needed: https://jsfiddle.net/ry5mLkaL/1/
Also, your HTML is invalid starting at line 42. You should not wrap a List Item with an Anchor (or anything). The anchor should be inside of the List Item.
<ul id="nav">
<li class="nav-item">Company Services</li>
<li class="nav-item">Sky Advantages</li>
<li class="nav-item">Customer Recognition</li>
<li class="nav-item">News Releases</li>
</ul>
to
<ul id="nav">
<li class="nav-item">Company Services</li>
<li class="nav-item">Sky Advantages</li>
<li class="nav-item">Customer Recognition</li>
<li class="nav-item">News Releases</li>
</ul>

Answer 2

Because of #nav display:inline.
Set it to display:table-row;

Answer 3

Add #nav{padding-left: 0px} to your CSS, see fiddle: https://jsfiddle.net/zjckk9uL/4/