title: Awkward gap between menu items. How to fix?
body: <p>I am having trouble with the layout of a website I'm making.
  I'm not very good with CSS.</p>
  
  <p>So the trouble I'm having is that I want to have a horizontal menu bar that I want to center in my website. This menu can have dropdown children.</p>
  
  <p>The implementation is in jQuery.
  So this is the HTML code of my menu bar :</p>
  
  <pre><code>&lt;ul class='dropdown'&gt;
      &lt;li&gt;&lt;a href='index.php'&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Incident&lt;/a&gt;
          &lt;ul class='sub_menu'&gt;
              &lt;li&gt;&lt;a href='index.php?action=new'&gt;New&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='index.php?action=edit'&gt;Edit&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='index.php?action=manage'&gt;Manage&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href='action_logout.php'&gt;Log out&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and this is the CSS that is being implemented :</p>
  
  <pre><code>*                                   { margin: 0; padding: 0; }
  body                                { font: 14px Helvetica, Sans-Serif; margin: 15px; } 
  a                                   { text-decoration: none; }
  ul                                  { width: 800px; list-style: none; text-align: center; margin: auto; padding: 2px 2px;}
  p                                   { margin: 15px 0; }
  /* 
      LEVEL ONE
  */
  ul.dropdown                         { position: relative; }
  ul.dropdown li                      { display: inline; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; }
  ul.dropdown a:hover              { color: #000; }
  ul.dropdown a:active                { color: #ffa500; }
  ul.dropdown li a                    { display: inline; padding: 2px 8px; border-right: 1px solid #777; border-bottom: 1px solid #777;
                                    color: #222; }
  ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
  ul.dropdown li.hover,
  ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
  ul.dropdown li.hover a              { color: black; }
  /* 
      LEVEL TWO
  */
  ul.dropdown ul                      { width: 175px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; }
  ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; 
                                    border-bottom: 1px solid #ccc; float: none; }
                                  /* IE 6 &amp; 7 Needs Inline Block */
  ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/fPAFs/" rel="nofollow">An Example can be seen here.</a></strong></p>
  
  <p>I did manage to center my menu bar after all. However there seems to be a little gap between Home and Incident menus and I've no idea how to get rid of it.</p>
  
  <p>Any ideas?
  Thank you in advance.</p>