How can I get rid of mysterious extra space after in simple drop-down menu code?

How can I get rid of mysterious extra space after in simple drop-down menu
code?

I have a simple CSS drop-down menu and for some reason, the browser (Mac
Chrome + Firefox) is adding extra space after the menu option where I have
a (hidden) sub-menu.
Here's the code:
<ul>
<li>Option Zero</li>
<li>Option One Is Longer</li>
<li class='current'>Option Two
<ul class='sub-menu'>
<li>Sub One</li>
</ul>
</li>
<li>Option Three Is Not the Best</li>
</ul>
and markup:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{background:#ccc;font-size:18px;font-family:Arial,sans-serif;font-weight:bold;}
ul {list-style:none;width:100%;background:green;height:50px;
padding:10px 10px 0 10px;margin:0px;}
li {float:left;margin-top:10px;}
li:after {content:"|";margin:0 8px;}
.sub-menu {display:none;}
and jsfiddle: http://jsfiddle.net/pnoeric/hjVWQ/2/
Note the extra space after "Option Two," before the divider. Where's that
extra space coming from, and how can I get rid of it?