0

My menu is producing a strange result with margins. All of the margins are set equally and yet in the middle, it appears they are colliding... you will have to see the fiddle I have posted.

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>

user3600205
  • 3
  • 2
  • `inline` elements respect the whitespace in the markup - they therefore generate gaps/spaces respectively. See [this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859) .. also, here is an [updated version](http://fiddle.jshell.net/febqb/) of your example. Notice that the issue is no longer present after removing the whitespace? – Josh Crozier May 09 '14 at 02:06
  • Thanks, I'm embarrassed.! – user3600205 May 09 '14 at 02:38