CSS边距计算不一样

Question

我的菜单产生了一个带边距的奇怪结果。所有的边距都是平等的，但在中间，看起来它们正在发生碰撞......你必须看到我发布的小提琴。

http://fiddle.jshell.net/AHa95/

<ul id="nav">
<li><a href="index.php">Home</a>
</li>
<li><a href="about.php">About</a>
</li>
<li><a href="products.php">Products</a>
    <span id="s2"></span>
    <ul class="subs">
        <li><a href="#">Scoreboards</a>
            <ul>
                <li><a href="#">Scoreboard 1</a></li>
                <li><a href="#">Scoreboard 2</a></li>
                <li><a href="#">Scoreboard 3</a></li>
            </ul>
        </li>
        <li><a href="#">TimeKeeper Pro</a>
            <ul>
                <li><a href="#">Demo</a></li>
                <li><a href="#">Trial</a></li>
                <li><a href="#">Purchase</a></li>
                <li><a href="#">Training</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="leagues.php">Leagues</a>
<li><a href="schedule.php">Schedules</a>
</li>
<li><a href="login.php">Login</a>
</li>
<li><a href="register.php">Register</a>
</li>
<li><a href="contact.php">Contact</a>

</li>